Developer tools on the most popular browsers
Developer tools on the most popular browsers
Did you know, every modern web browser includes its own set of developer tools?
If you didn’t, that’s okay. Developer tools aren’t always the easiest thing to find in your browser. So, we’ve decided to help you out by creating this guide to developer tools!
Instructions
- Google Chrome
- Mozilla Firefoxsroom.udacity.com/courses/ud3
- Internet Explorer
- Microsoft Edge
- Safari
- Opera
Google Chrome
The Chrome DevTools are a set of web authoring and debugging tools built into Google Chrome. Use the DevTools to iterate, debug and profile your site. To learn more, click here.
To open Chrome DevTools, either right-click on any page element and select Inspect or open the Chrome settings menu in the top-right corner of your browser window and select More Tools > Developer Tools. Alternatively, you can use the shortcuts:
Command + Option + i(Mac)Ctrl + Shift + i(Windows/Linux).
Mozilla Firefox
Firefox Developer Tools allow you to examine, edit, and debug HTML, CSS, and JavaScript on the desktop and on mobile. Also, you can download a version of of Firefox called Firefox Developer Edition that is tailored for developers, featuring the latest Firefox features and experimental developer tools. To learn more, click here.
To open Firefox Developer Tools, either right-click on any page element and select Inspect Element or open the Firefox settings menu in the top-right corner of your browser window and select Developer. Alternatively, you can use the shortcuts:
Command + Option + i(Mac)Ctrl + Shift + i(Windows/Linux).
Internet Explorer
If you use Internet Explorer, then you can access F12 developer tools by simply pressing F12. The features vary between versions, but starting at Internet Explorer 8 remain pretty consistent. Below, we’ve linked to documentation for each version, but if you’ve upgraded to Microsoft Edge, then check the next section.
Microsoft Edge
Microsoft Edge introduces great new improvements to the F12 developer tools seen in Internet Explorer. The new tools are built in TypeScript, and are always running, so no reloads are required. In addition, F12 developer tools documentation is now fully available on GitHub.
Just like Internet Explorer, to open developer tools in Microsoft Edge simply press F12.
To learn more, click here.
Safari
For any Mac users, Safari includes Web Inspector, a powerful tool that makes it easy to modify, debug, and optimize a website for peak performance and compatibility on both platforms. To learn more, click here.
To access Safari’s Web Development Tools, enable the Develop menu in Safari’s Advanced preferences. Once enabled, you can right-click on any page element and select Inspect Element to open Web Development Tools or use the shortcut Command + Option + i.
Opera
Fast, lean and powerful, Opera comes pre-packed with a fully-featured suite of developer tools. Named Opera Dragonfly, it is designed to make your job easier. To learn more, click here.
Launch Opera Dragonfly with the following keyboard shortcuts:
Command + Option + i(Mac)Ctrl + Shift + i(Windows/Linux).
Alternatively, you can target a specific element by right-clicking in the page and selecting Inspect Element.
Related Posts
About The Author
