Skip to main content

Uncategorised

Written by coolcatcreations on . Posted in Uncategorised.

What Is the Browser Inspector, Anyway?

What Is the Browser Inspector, Anyway?

If you’ve ever been on a website, thought “Why does this look so weird?” and then right-clicked and chose “Inspect” or “Inspect Element”, congratulations – you’ve already met the browser inspector.

But what is this tool exactly? And what can you actually do with it?

In this article, we’ll walk through it calmly: no hardcore developer jargon – just what the inspector is, where to find it, and what it’s good for.

In Short: What Does the Browser Inspector Do?

The browser inspector (also called DevTools, Developer Tools, or Web Inspector) is a toolbox built right into your browser.

With it, you can:

  • see and edit the HTML and CSS of a page in real time,

  • view error messages that are normally hidden,

  • inspect network requests (like API calls, XHR, Fetch),

  • look at cookies, LocalStorage, SessionStorage & other storage,

  • analyze performance (what takes long, what blocks rendering),

  • test mobile/responsive behavior and slow networks.

You don’t need to install anything – Chrome, Firefox, Edge, Safari & others ship with it out of the box.

Where Do You Find the Inspector? (Chrome, Firefox, Safari & Co.)

The basic ways to open it are very similar across browsers.

Chrome / Edge (Chromium-based)

  • Right-click on any element → “Inspect”

  • or: Menu → More tools → Developer tools

  • Keyboard shortcuts:

    • Windows / Linux: Ctrl + Shift + I

    • macOS: Cmd + Option + I

Firefox

  • Right-click → “Inspect” or “Inspect Element”

  • or: Menu → More Tools → Web Developer Tools

  • Shortcuts:

    • Windows / Linux: Ctrl + Shift + I

    • macOS: Cmd + Option + I

Safari

Safari hides this a bit at first:

  1. Go to Safari → Settings → Advanced

  2. Enable “Show Develop menu in menu bar”

  3. Then use Develop → Show Web Inspector

  4. Shortcut:

    • macOS: Cmd + Option + I

From that point on, the basic idea is the same in all browsers.

What Can You Actually Do With It? (Real-World Examples)

Here are some typical situations:

  • “My CSS isn’t applied – why?”
    → In the inspector you can see exactly which CSS rules affect an element and whether some rule overrides another.

  • “The button is there, but I can’t click it.”
    → You can check if an invisible element is on top, if pointer-events: none is set, or if the z-index is off.

  • “The page is slow – is it the server?”
    → The Network tab shows you all requests, their size, status and timing.

  • “My AJAX request keeps failing.”
    → You can inspect the request and response in the Network tab and see exactly what the server sends back (including JSON bodies and error codes).

  • “Login or cookies behave strangely.”
    → You can open the Storage/Applications tab, look at cookies and storage values, and see whether the right cookies are set.

In short, the inspector is your X-ray machine for websites.
Whether you are a designer, developer, admin, SEO, or just curious: this tool helps you see what the browser is really doing.

A Quick Tour of the Main Panels

Each browser names its panels a bit differently, but the core areas are similar.

  • Elements / Inspector (HTML & CSS)

    • Shows you the DOM tree of the page (the structure of elements).

    • When you hover over elements in the tree, they highlight on the page.

    • On the side, you see the CSS rules:

      • which properties are currently active,

      • which ones are overridden (strikethrough),

      • you can toggle them on/off, edit values, or add new ones.

    This is your first stop when something looks wrong in the layout.

  • Console

      • Shows errors, warnings and log messages generated by the page.

      • JavaScript errors appear here with line numbers.

      • You can also type JavaScript directly and run it in the context of the page.

    Think of the console as a chat window with your website: you ask it things (document.querySelector(...)) and it replies.

  • Network

    • Lists every request the page makes:

      • HTML, CSS, JS, images, fonts, XHR/Fetch, APIs, WebSockets…

    • For each request you see:

      • Status code (200, 301, 404, 500 …)

      • Method (GET, POST, …)

      • Size & duration

      • Request & response headers

      • Often the response body (e.g. JSON)

    This is perfect for:

    • debugging API issues,

    • analyzing caching,

    • seeing what loads slowly and why.

  • Application / Storage

    Names may vary (Application, Storage, Storage Inspector), but content is similar:

    • Cookies

    • LocalStorage / SessionStorage

    • IndexedDB, Cache Storage, Service Workers, etc.

    Here you can:

    • view, edit and delete cookies,

    • inspect stored values (tokens, preferences, feature flags).

  • Performance / Profiler

    If you want to go deeper:

    • record load and runtime performance,

    • inspect flame charts, scripting, rendering, and painting,

    • see where CPU and memory are spent.

    This is more of a Level 2 topic, but good to know it’s there.

  • Responsive / Device Mode

    Usually accessible via a small phone/tablet icon in DevTools:

    • emulate different screen sizes and devices,

    • simulate various pixel densities,

    • throttle network speed (e.g. “Fast 3G”, “Slow 3G”).

    This is great for debugging mobile issues without constantly grabbing your phone.

Chrome vs Firefox vs Safari – Does It Matter?

Very short version:

  • Chrome DevTools
    Most widely used, tons of docs and tutorials, powerful JS debugging, Lighthouse built-in.

  • Firefox Developer Tools
    Excellent CSS and layout tools, especially for Grid and Flexbox. Very visual.

  • Safari Web Inspector
    Required if you want to be serious about iOS/macOS bugs. Some UI differences, but similar structure.

For the beginning:
Pick one browser as your “home base” and get comfortable there.
Once you understand DOM, Console and Network in one browser, it’s easy to transfer that knowledge.

A 2-Minute Exercise for Your First “Aha!” Moment

Try this:

  1. Open any website you know (maybe your own).

  2. Right-click a headline → “Inspect”.

  3. In the Elements/Inspector panel:

    • Look at the HTML: which tag is it? <h1>, <h2>, something else?

    • On the side, look at the CSS rules.

  4. Change something:

    • color: red;

    • font-size: 40px;

    • or add border: 1px solid.

Don’t worry: these changes are only local in your browser and disappear as soon as you reload the page.

Once you’ve done that, the inspector stops being this “hacker window” and becomes what it really is:
a tool you’re allowed to touch.

Read more …What Is the Browser Inspector, Anyway?

  • Hits: 148

Written by coolcatcreations on . Posted in Uncategorised.

About us

We’re coolcat creations – a small web design & development studio that learns best by explaining things to others. Every time we dive into a topic, we want to really understand it. And for us, the best way to do that is to break it down, write it out, and teach it.

When it comes to the Browser Inspector (DevTools in Chrome, Firefox, Safari & Co.), we kept running into the same problem: there was no single, clear, friendly guide that explains everything in one place. Network tab, layout tools, performance, accessibility checks, cookies, cache, XHR, console, fun easter eggs – the whole package.

So we decided to build that resource ourselves.

On browser-inspector.com we collect tips, tricks, tutorials and examples that show:

  • how to use the Browser Inspector step by step,

  • what you can actually do with it,

  • and why it’s such a powerful tool for developers, designers and website owners alike.

A big part of our work is teaching. We run web design classes for kids and introduce them to building sites with Joomla. In the very first lesson, we always open the Browser Inspector. Why? Because it’s the perfect hook: you can change text or colours on any page on your own screen and “prank” a website for a moment. The kids love it – and they instantly see that the web is not some mysterious black box, but something they can understand, play with, and eventually build themselves.

That sense of fun and curiosity is exactly what we want this site to carry. The Browser Inspector is not just a dry developer tool – it’s a playful, powerful way to explore how the web works.

We’re completely independent – we don’t cooperate with any browser vendor (at least not yet 😉). Our only goal is to help people feel confident using the tools that are already built into their browser, so they can understand their websites better, debug smarter, and design with more control.

If you learn best by seeing how things work and having someone explain it in plain language, you’re in the right place.

Read more …About us

  • Hits: 39

Written by coolcatcreations on . Posted in Uncategorised.

Privacy policy

Privacy Policy

1. An overview of data protection

General information

The following information will provide you with an easy to navigate overview of what will happen with your personal data when you visit this website. The term “personal data” comprises all data that can be used to personally identify you. For detailed information about the subject matter of data protection, please consult our Data Protection Declaration, which we have included beneath this copy.

Data recording on this website

Who is the responsible party for the recording of data on this website (i.e., the “controller”)?

The data on this website is processed by the operator of the website, whose contact information is available under section “Information about the responsible party (referred to as the “controller” in the GDPR)” in this Privacy Policy.

How do we record your data?

We collect your data as a result of your sharing of your data with us. This may, for instance be information you enter into our contact form.

Other data shall be recorded by our IT systems automatically or after you consent to its recording during your website visit. This data comprises primarily technical information (e.g., web browser, operating system, or time the site was accessed). This information is recorded automatically when you access this website.

What are the purposes we use your data for?

A portion of the information is generated to guarantee the error free provision of the website. Other data may be used to analyze your user patterns. If contracts can be concluded or initiated via the website, the transmitted data will also be processed for contract offers, orders or other order enquiries.

What rights do you have as far as your information is concerned?

You have the right to receive information about the source, recipients, and purposes of your archived personal data at any time without having to pay a fee for such disclosures. You also have the right to demand that your data are rectified or eradicated. If you have consented to data processing, you have the option to revoke this consent at any time, which shall affect all future data processing. Moreover, you have the right to demand that the processing of your data be restricted under certain circumstances. Furthermore, you have the right to log a complaint with the competent supervising agency.

Please do not hesitate to contact us at any time if you have questions about this or any other data protection related issues.

2. Hosting

We are hosting the content of our website at the following provider:

All-Inkl

The Provider is the ALL-INKL.COM – Neue Medien Münnich, owner: René Münnich, Hauptstraße 68, 02742 Friedersdorf, Germany (hereinafter “All-Inkl”). For details, please visit the privacy policy of All-Inkl: https://all-inkl.com/datenschutzinformationen/.

The use of All-Inkl is based on Art. 6(1)(f) GDPR. We have a legitimate interest in the most reliable representation of our website. If appropriate consent has been obtained, the processing is carried out exclusively on the basis of Art. 6(1)(a) GDPR and § 25 (1) TDDDG, insofar the consent includes the storage of cookies or the access to information in the user’s end device (e.g., device fingerprinting) within the meaning of the TDDDG. This consent can be revoked at any time.

Data processing

We have concluded a data processing agreement (DPA) for the use of the above-mentioned service. This is a contract mandated by data privacy laws that guarantees that they process personal data of our website visitors only based on our instructions and in compliance with the GDPR.

3. General information and mandatory information

Data protection

The operators of this website and its pages take the protection of your personal data very seriously. Hence, we handle your personal data as confidential information and in compliance with the statutory data protection regulations and this Data Protection Declaration.

Whenever you use this website, a variety of personal information will be collected. Personal data comprises data that can be used to personally identify you. This Data Protection Declaration explains which data we collect as well as the purposes we use this data for. It also explains how, and for which purpose the information is collected.

We herewith advise you that the transmission of data via the Internet (i.e., through e-mail communications) may be prone to security gaps. It is not possible to completely protect data against third-party access.

Information about the responsible party (referred to as the “controller” in the GDPR)

The data processing controller on this website is:

Elisa Foltyn
Obere Herrngasse 9
74523 Schwäbisch Hall

Phone: 0170 3171072
E-mail: This email address is being protected from spambots. You need JavaScript enabled to view it.

The controller is the natural person or legal entity that single-handedly or jointly with others makes decisions as to the purposes of and resources for the processing of personal data (e.g., names, e-mail addresses, etc.).

Storage duration

Unless a more specific storage period has been specified in this privacy policy, your personal data will remain with us until the purpose for which it was collected no longer applies. If you assert a justified request for deletion or revoke your consent to data processing, your data will be deleted, unless we have other legally permissible reasons for storing your personal data (e.g., tax or commercial law retention periods); in the latter case, the deletion will take place after these reasons cease to apply.

General information on the legal basis for the data processing on this website

If you have consented to data processing, we process your personal data on the basis of Art. 6(1)(a) GDPR or Art. 9 (2)(a) GDPR, if special categories of data are processed according to Art. 9 (1) DSGVO. In the case of explicit consent to the transfer of personal data to third countries, the data processing is also based on Art. 49 (1)(a) GDPR. If you have consented to the storage of cookies or to the access to information in your end device (e.g., via device fingerprinting), the data processing is additionally based on § 25 (1) TDDDG. The consent can be revoked at any time. If your data is required for the fulfillment of a contract or for the implementation of pre-contractual measures, we process your data on the basis of Art. 6(1)(b) GDPR. Furthermore, if your data is required for the fulfillment of a legal obligation, we process it on the basis of Art. 6(1)(c) GDPR. Furthermore, the data processing may be carried out on the basis of our legitimate interest according to Art. 6(1)(f) GDPR. Information on the relevant legal basis in each individual case is provided in the following paragraphs of this privacy policy.

Recipients of personal data

In the scope of our business activities, we cooperate with various external parties. In some cases, this also requires the transfer of personal data to these external parties. We only disclose personal data to external parties if this is required as part of the fulfillment of a contract, if we are legally obligated to do so (e.g., disclosure of data to tax authorities), if we have a legitimate interest in the disclosure pursuant to Art. 6 (1)(f) GDPR, or if another legal basis permits the disclosure of this data. When using processors, we only disclose personal data of our customers on the basis of a valid contract on data processing. In the case of joint processing, a joint processing agreement is concluded.

Revocation of your consent to the processing of data

A wide range of data processing transactions are possible only subject to your express consent. You can also revoke at any time any consent you have already given us. This shall be without prejudice to the lawfulness of any data collection that occurred prior to your revocation.

Right to object to the collection of data in special cases; right to object to direct advertising (Art. 21 GDPR)

IN THE EVENT THAT DATA ARE PROCESSED ON THE BASIS OF ART. 6(1)(E) OR (F) GDPR, YOU HAVE THE RIGHT TO AT ANY TIME OBJECT TO THE PROCESSING OF YOUR PERSONAL DATA BASED ON GROUNDS ARISING FROM YOUR UNIQUE SITUATION. THIS ALSO APPLIES TO ANY PROFILING BASED ON THESE PROVISIONS. TO DETERMINE THE LEGAL BASIS, ON WHICH ANY PROCESSING OF DATA IS BASED, PLEASE CONSULT THIS DATA PROTECTION DECLARATION. IF YOU LOG AN OBJECTION, WE WILL NO LONGER PROCESS YOUR AFFECTED PERSONAL DATA, UNLESS WE ARE IN A POSITION TO PRESENT COMPELLING PROTECTION WORTHY GROUNDS FOR THE PROCESSING OF YOUR DATA, THAT OUTWEIGH YOUR INTERESTS, RIGHTS AND FREEDOMS OR IF THE PURPOSE OF THE PROCESSING IS THE CLAIMING, EXERCISING OR DEFENCE OF LEGAL ENTITLEMENTS (OBJECTION PURSUANT TO ART. 21(1) GDPR).

IF YOUR PERSONAL DATA IS BEING PROCESSED IN ORDER TO ENGAGE IN DIRECT ADVERTISING, YOU HAVE THE RIGHT TO OBJECT TO THE PROCESSING OF YOUR AFFECTED PERSONAL DATA FOR THE PURPOSES OF SUCH ADVERTISING AT ANY TIME. THIS ALSO APPLIES TO PROFILING TO THE EXTENT THAT IT IS AFFILIATED WITH SUCH DIRECT ADVERTISING. IF YOU OBJECT, YOUR PERSONAL DATA WILL SUBSEQUENTLY NO LONGER BE USED FOR DIRECT ADVERTISING PURPOSES (OBJECTION PURSUANT TO ART. 21(2) GDPR).

Right to log a complaint with the competent supervisory agency

In the event of violations of the GDPR, data subjects are entitled to log a complaint with a supervisory agency, in particular in the member state where they usually maintain their domicile, place of work or at the place where the alleged violation occurred. The right to log a complaint is in effect regardless of any other administrative or court proceedings available as legal recourses.

Right to data portability

You have the right to have data that we process automatically on the basis of your consent or in fulfillment of a contract handed over to you or to a third party in a common, machine-readable format. If you should demand the direct transfer of the data to another controller, this will be done only if it is technically feasible.

Information about, rectification and eradication of data

Within the scope of the applicable statutory provisions, you have the right to demand information about your archived personal data, their source and recipients as well as the purpose of the processing of your data at any time. You may also have a right to have your data rectified or eradicated. If you have questions about this subject matter or any other questions about personal data, please do not hesitate to contact us at any time.

Right to demand processing restrictions

You have the right to demand the imposition of restrictions as far as the processing of your personal data is concerned. To do so, you may contact us at any time. The right to demand restriction of processing applies in the following cases:

  • In the event that you should dispute the correctness of your data archived by us, we will usually need some time to verify this claim. During the time that this investigation is ongoing, you have the right to demand that we restrict the processing of your personal data.
  • If the processing of your personal data was/is conducted in an unlawful manner, you have the option to demand the restriction of the processing of your data instead of demanding the eradication of this data.
  • If we do not need your personal data any longer and you need it to exercise, defend or claim legal entitlements, you have the right to demand the restriction of the processing of your personal data instead of its eradication.
  • If you have raised an objection pursuant to Art. 21(1) GDPR, your rights and our rights will have to be weighed against each other. As long as it has not been determined whose interests prevail, you have the right to demand a restriction of the processing of your personal data.

If you have restricted the processing of your personal data, these data – with the exception of their archiving – may be processed only subject to your consent or to claim, exercise or defend legal entitlements or to protect the rights of other natural persons or legal entities or for important public interest reasons cited by the European Union or a member state of the EU.

SSL and/or TLS encryption

For security reasons and to protect the transmission of confidential content, such as purchase orders or inquiries you submit to us as the website operator, this website uses either an SSL or a TLS encryption program. You can recognize an encrypted connection by checking whether the address line of the browser switches from “http://” to “https://” and also by the appearance of the lock icon in the browser line.

If the SSL or TLS encryption is activated, data you transmit to us cannot be read by third parties.

4. Plug-ins and Tools

YouTube with expanded data protection integration

This website integrates videos from the YouTube website. The operator of the website is Google Ireland Limited (“Google”), Gordon House, Barrow Street, Dublin 4, Ireland.

When you visit one of these websites on which YouTube is integrated, a connection to the YouTube servers is established. This tells the YouTube server which of our pages you have visited. If you are logged into your YouTube account, you enable YouTube to assign your surfing behavior directly to your personal profile. You can prevent this by logging out of your YouTube account.

We use YouTube in extended data protection mode. According to YouTube, videos that are played in extended data protection mode are not used to personalize browsing on YouTube. Ads that are played in extended data protection mode are also not personalized. No cookies are set in extended data protection mode. Instead, so-called local storage elements are stored in the user's browser, which contain personal data similar to cookies and can be used for recognition. Details on the extended data protection mode can be found here: https://support.google.com/youtube/answer/171780.

After activating a YouTube video, further data processing operations may be triggered over which we have no influence.

The use of YouTube is based on our interest in presenting our online content in an appealing manner. Pursuant to Art. 6(1)(f) GDPR, this is a legitimate interest. If appropriate consent has been obtained, the processing is carried out exclusively on the basis of Art. 6(1)(a) GDPR and § 25 (1) TDDDG, insofar the consent includes the storage of cookies or the access to information in the user’s end device (e.g., device fingerprinting) within the meaning of the TDDDG. This consent can be revoked at any time.

For more information on how YouTube handles user data, please consult the YouTube Data Privacy Policy under: https://policies.google.com/privacy?hl=en.

The company is certified in accordance with the “EU-US Data Privacy Framework” (DPF). The DPF is an agreement between the European Union and the US, which is intended to ensure compliance with European data protection standards for data processing in the US. Every company certified under the DPF is obliged to comply with these data protection standards. For more information, please contact the provider under the following link: https://www.dataprivacyframework.gov/participant/5780.

Google Fonts (local embedding)

This website uses so-called Google Fonts provided by Google to ensure the uniform use of fonts on this site. These Google fonts are locally installed so that a connection to Google’s servers will not be established in conjunction with this application.

For more information on Google Fonts, please follow this link: https://developers.google.com/fonts/faq and consult Google’s Data Privacy Declaration under: https://policies.google.com/privacy?hl=en.

  • Hits: 9

Written by coolcatcreations on . Posted in Uncategorised.

Imprint

Site Notice

Elisa Foltyn
Obere Herrngasse 9 · 74523 Schwäbisch Hall

Contact:

Telephone: 0170 3171072
Email: This email address is being protected from spambots. You need JavaScript enabled to view it.

VAT:

VAT Id number according to Sec. 27 a German Value Added Tax Act:
DE268300485

Responsible for contents:

Elisa Foltyn
Obere Herrngasse 9 · 74523 Schwäbisch Hall

Liability for Contents

As service providers, we are liable for own contents of these websites according to Sec. 7, paragraph 1 German Telemedia Act (TMG). However, according to Sec. 8 to 10 German Telemedia Act (TMG), service providers are not obligated to permanently monitor submitted or stored information or to search for evidences that indicate illegal activities.

Legal obligations to removing information or to blocking the use of information remain unchallenged. In this case, liability is only possible at the time of knowledge about a specific violation of law. Illegal contents will be removed immediately at the time we get knowledge of them.

Liability for Links

Our offer includes links to external third party websites. We have no influence on the contents of those websites, therefore we cannot guarantee for those contents. Providers or administrators of linked websites are always responsible for their own contents.

The linked websites had been checked for possible violations of law at the time of the establishment of the link. Illegal contents were not detected at the time of the linking. A permanent monitoring of the contents of linked websites cannot be imposed without reasonable indications that there has been a violation of law. Illegal links will be removed immediately at the time we get knowledge of them.

Copyright

Contents and compilations published on these websites by the providers are subject to German copyright laws. Reproduction, editing, distribution as well as the use of any kind outside the scope of the copyright law require a written permission of the author or originator. Downloads and copies of these websites are permitted for private use only.
The commercial use of our contents without permission of the originator is prohibited.

Copyright laws of third parties are respected as long as the contents on these websites do not originate from the provider. Contributions of third parties on this site are indicated as such. However, if you notice any violations of copyright law, please inform us. Such contents will be removed immediately.

  • Hits: 10