Categories

How To Access Your Browser Developer Console?

In the world of web development, accessing the browser's developer console is akin to being that detective with a powerful tool at your disposal. Just like a detective needs to examine evidence and clues to solve a case, web developers and designers often need to delve into the inner workings of websites to understand how they function and identify any issues.


For instance, imagine you're working on any web application and encountering an issue - e.g, a button—fails to function as expected. Instead of merely reporting that the button isn't working, providing a screenshot of the console can significantly expedite issue resolution. Developers can easily identify and rectify the problem by examining the console output.


Accessing the developer console tools in most modern web browsers is quite straightforward. Here's how you can do it in some commonly used browsers:

  1. Google Chrome
  2. Mozilla Firefox
  3. Microsoft Edge
  4. Apple Safari

Google Chrome

Inside Google Chrome, the Developer console can be accessed by following these simple steps


Keyboard Shortcut: Press Ctrl + Shift + J (Windows) and Cmd + Option + J (Mac).
  1. Open your Google Chrome Browser and click on the more options at the top left.
  2. Select 'More tools' and click on 'Developer Tools.' from the sidebar.

Screen Shot 2024-03-21 at 2.11.08 PM.png


  1. Once done the Developer tools open up, and click on the console.

Screen Shot 2024-03-21 at 2.10.41 PM.png

Mozilla Firefox

Keyboard Shortcut: Press Ctrl + Shift + K (Windows) and Cmd + Option + K (Mac).


Inside Mozilla Firefox, the Developer console can be accessed by following these simple steps

  1. Open your Mozilla Firefox Browser and click on the more options at the top left.

Screen Shot 2024-03-21 at 2.12.09 PM.png


  1. Select 'More tools' and click on 'Web Developer Tools.' from the sidebar.

Screen Shot 2024-03-21 at 2.12.41 PM.png


  1. Once done the Developer tools open up, and click on the console.

Screen Shot 2024-03-21 at 3.48.28 PM.png

Microsoft Edge

Keyboard Shortcut: Press Ctrl + Shift + I (Windows) and Cmd + Option + I (Mac).


Inside Microsoft Edge, the Developer console can be accessed by following these simple steps

  1. Open your Microsoft Edge Browser and click on the more options at the top left.
  2. Select 'More tools' and click on 'Developer Tools.' from the sidebar.

Screen Shot 2024-03-21 at 2.13.00 PM.png


  1. Once done the Developer tools open up, and click on the console.

Screen Shot 2024-03-21 at 2.13.28 PM.png


Apple Safari

Keyboard Shortcut: Press Option + Cmd + C


Inside Apple Safari, the Developer console can be accessed by following these simple steps

  1. Open your Apple Safari Browser and click on the 'Safari' at the top left.
  2. Select 'Preferences' from the list.

Screen Shot 2024-03-21 at 2.14.23 PM.png


  1. Then select 'Advanced' and select the developer options check box.

Screen Shot 2024-03-21 at 2.15.31 PM.png


  1. Now, select 'Develop' from the top and click on 'Show Javascript Console.'

Screen Shot 2024-03-21 at 2.15.48 PM.png


  1. The Developer tools open up and click on the console.

Screen Shot 2024-03-21 at 2.18.03 PM.png



Rate this article
great ok bad
For more questions - Contact Us
Categories
SubPageApp Made with SubPage
...