Web developer tools allow professionals to create software and debug and test their code on web development projects. These tools also help individuals review the user interface of a web application or website. While these tools may not help developers build an application or website, they allow them to review the security and aesthetic features and design custom website elements. <\/p>
They may be available to web developers as add-ons and built-in features in web browsers. <\/p>
When choosing a program, professionals may consider various factors, including ease of use, scalability, security, functionality, and cost.<\/p>
While web designers and developers may use several programs to create, manage, and assess a website or application, such as DevTools and website builders, these resources have distinct differences. Website builders assist with the direct process of web application and site creation. <\/p>
Alternatively, DevTools are programs that allow web developers to test and analyze the performance of their code. They also make improvements to existing web pages and apps.<\/p>
Examples of DevTools<\/strong><\/span><\/h2>Notepad++<\/strong><\/h3>Notepad++ is a powerful open-source code editor that Windows users can rely on to review and improve text within a website or web application. Although it may not have a unique aesthetic theme, it offers web developers a variety of features that can help them edit their projects and debug their code when necessary. <\/p>
Professionals may also prefer this DevTool because it supports 27 programming languages and provides synchronized views and edits.<\/p>
Django<\/strong><\/h3>Django is a Python framework that web developers can use on complex and popular websites and applications. This program is scalable and secure, and professionals can use it for small-scale projects or large web development projects. It helps create sites with less code, which can make the testing and revision process more efficient. <\/p>
Users may also enjoy a variety of Django’s utilities and packages that focus on creating a straightforward design and optimizing development.<\/p>
REST Assured<\/strong><\/h3>REST Assured may benefit web developers who work with Java because they can use it without HTTP expertise, and it allows users to validate and test code using simple programming languages. By automating elements of the boilerplate code, REST Assured can save professionals time. <\/p>
It also allows individuals to use notifications, such as given, when, and then, to simplify the testing process and send and receive requests and responses.<\/p>
Meteor<\/strong><\/h3>Meteor is a full-stack open-source framework that allows web developers to deploy and maintain desktop, web and mobile applications. It can easily integrate with a professional’s tech-stack, allowing users to devote their time to building and testing rather than identifying tools that can operate together. It can also provide professionals with application metrics in real-time allowing web developers to track the performance of their project and identify any issues that may require testing.<\/p>
Vim<\/strong><\/h3>Vim is a highly configurable code editor that professionals can also use to revise other content, including blog posts and emails. It provides users with over 200 syntax files and integrations with Python and TCL. <\/p>
It may require more time to understand than other options, but users may prefer it because it allows them to develop the ideal programming environment.<\/p>
Ruby on Rails<\/strong><\/h3>Ruby on Rails is a DevTool that may make it easy for users to read, write, maintain, test and deploy code, which means web developers may find it helpful for a variety of projects. It can also integrate with third-party applications and provide users with a straightforward design language. <\/p>
It may be useful for web developers who work independently rather than with a team of professionals because its intuitive workflow design can help them launch projects and make changes efficiently.<\/p>
Atom<\/strong><\/h3>Atom is a text editing DevTool that offers users a variety of customizable features that allow them to make the program meet their unique project testing requirements. Professionals can choose from thousands of Atom’s open-source packages and may use this tool with Linux, Mac, and Windows. <\/p>
It can also help individuals who are members of a professional team, as it provides users with several real-time collaboration tools to help professionals work alongside each other on a project.<\/p>
Ember<\/strong><\/h3>Ember is an open-source JavaScript tool and web framework with a user experience that professionals may prefer compared to other DevTools. The built-in development features include auto-reload, test runners and efficient rebuilds. <\/p>
It also allows users to create asynchronous relationships and may be ideal for remote work because it can keep models up to date across the platform.<\/p>
Foundation<\/strong><\/h3>Foundation is a front-end framework and DevTool that provides users with HTML, CSS and JavaScript templates to create and maintain code for websites and applications. This tool may be accessible to web developers with various levels of experience and training, and professionals can use it on a variety of devices. <\/p>
Users can also use it to create HTML code for emails that viewers can access on various platforms.<\/p>
HoppScotch<\/strong><\/h3>HoppScotch is an open-source web development tool with an appealing aesthetic design that professionals may prefer because of its advanced functionality. It can handle a variety of tasks, including creating full-duplex communication channels and adding translations for users with preferred languages other than English. <\/p>
It also provides users with collections to help them organize API requests and the ability to request and restore edits with a single click.<\/p>
How to open DevTools in your browser<\/strong><\/span><\/h2>Microsoft Edge<\/strong><\/span><\/h3>In Microsoft Edge, you can open DevTools by using the mouse or keyboard, in any of the following ways. Which tool is opened depends on how you open DevTools.<\/p>
Main ways:<\/strong><\/p>Action<\/th> Resulting tool<\/th><\/tr><\/thead> Right-click any item on a webpage, and then select Inspect<\/strong>.<\/td>The Elements<\/strong> tool, with the DOM tree expanded to show the right-clicked page element.<\/td><\/tr>Press Ctrl+Shift+I<\/strong> (Windows, Linux) or Command+Option+I<\/strong> (macOS).<\/td>The previously used tool, or the Welcome<\/strong> tool.<\/td><\/tr>Press F12<\/strong>.<\/td>The previously used tool, or the Welcome<\/strong> tool.<\/td><\/tr><\/tbody><\/table><\/figure>Additional ways:<\/strong><\/p>Action<\/th> Resulting tool<\/th><\/tr><\/thead> On the Microsoft Edge toolbar, select Settings and more<\/strong> (![\"The](\"https:\/\/i0.wp.com\/learn.microsoft.com\/en-us\/microsoft-edge\/devtools-guide-chromium\/overview-images\/edge-settings-and-more-icon.png?w=1200&ssl=1\")
) > More tools<\/strong> > Developer tools<\/strong>.<\/td>The previously used tool, or the Welcome<\/strong> tool.<\/td><\/tr>Press Ctrl+Shift+J<\/strong> (Windows, Linux) or Command+Option+J<\/strong> (macOS).<\/td>The Console<\/strong> tool.<\/td><\/tr>Press Ctrl+Shift+C<\/strong> (Windows, Linux) or Command+Option+C<\/strong> (macOS).<\/td>The Elements<\/strong> tool, with the DOM tree expanded to show the <body><\/code> element.<\/td><\/tr>Press Shift+F10<\/strong> to open the right-click menu. To select the Inspect<\/strong> command, press Up Arrow<\/strong> and then Enter<\/strong>.<\/td>The Elements<\/strong> tool, with the DOM tree expanded to show the <html><\/code> element.<\/td><\/tr>Press Tab<\/strong> or Shift+Tab<\/strong> to put focus on a page element. Then press Shift+F10<\/strong> to open the right-click menu. To select the Inspect<\/strong> command, press Up Arrow<\/strong> and then Enter<\/strong>.<\/td>The Elements<\/strong> tool, with the DOM tree expanded to show the focused page element.<\/td><\/tr><\/tbody><\/table><\/figure>Chrome<\/strong><\/span><\/h3>There are many ways to open Chrome DevTools. Choose your favorite way from this comprehensive reference.<\/p>
You can access DevTools using Chrome UI or keyboard:<\/p>
- From\u00a0drop-down menus in Chrome.<\/li>\n\n
- With dedicated\u00a0shortcuts\u00a0that open\u00a0Elements<\/strong>,\u00a0Console<\/strong>, or the last panel you used.<\/li><\/ul>
Open the Elements panel to inspect the DOM or CSS<\/strong><\/span><\/h5>To inspect, right-click an element on a page and select\u00a0Inspect<\/strong>. DevTools opens the Elements<\/strong> panel and selects the element in the DOM tree. In the\u00a0Styles<\/strong>\u00a0pane, you can see CSS rules applied to the selected element.<\/p>![\"\"](\"https:\/\/i0.wp.com\/businessyield.com\/tech\/wp-content\/uploads\/sites\/2\/2023\/11\/image-4-1024x600.png?resize=1024%2C600&ssl=1\")
<\/figure>Open the last panel you used from Chrome’s main menu<\/strong><\/span><\/h5>To open the last DevTools panel, click the ![\"Three-dot](\"https:\/\/wd.imgix.net\/image\/NJdAV9UgKuN8AhoaPBquL7giZQo1\/N7wEDmtW9lnrSxPRupMa.svg\")
button to the right of the address bar and select More Tools<\/strong> > Developer Tools<\/strong>.<\/p>![\"The](\"https:\/\/i0.wp.com\/wd.imgix.net\/image\/NJdAV9UgKuN8AhoaPBquL7giZQo1\/bkh79zEFaByczisr3lD5.png?w=1200&ssl=1\")
<\/figure>Alternatively, you can open the last panel with a shortcut. See the next section to learn more.<\/p>
Open panels with shortcuts: Elements, Console, or your last panel<\/strong><\/span><\/h5>If you prefer a keyboard, press a shortcut in Chrome depending on your operating system:<\/p>OS<\/th> Elements<\/th> Console<\/th> Your last panel<\/th><\/tr><\/thead> Windows or Linux<\/td> Ctrl<\/kbd> + Shift<\/kbd> + C<\/strong><\/td>Ctrl<\/kbd> + Shift<\/kbd> + J<\/strong><\/td>F12<\/kbd>
Ctrl<\/kbd> + Shift<\/kbd> + I<\/strong><\/td><\/tr>Mac<\/td> Cmd<\/kbd> + Option<\/kbd> + C<\/strong><\/td>Cmd<\/kbd> + Option<\/kbd> + J<\/strong><\/td>Fn<\/kbd> + F12<\/kbd>
Cmd<\/kbd> + Option<\/kbd> + I<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>Here’s an easy way to memorize the shortcuts:<\/p>
- C<\/strong> stands for CSS.<\/li>\n\n
- J<\/strong> for JavaScript.<\/li>\n\n
- I<\/strong> designates your choice.<\/li><\/ul>
The C<\/strong> shortcut opens the Elements<\/strong> panel in ![\"Inspect.\"](\"https:\/\/i0.wp.com\/wd.imgix.net\/image\/NJdAV9UgKuN8AhoaPBquL7giZQo1\/7s3JQLXmIQmQa4CFXaNv.png?resize=21%2C20&ssl=1\")
inspector mode. This mode shows you helpful tooltips when you hover over elements on a page. You can also click any element to view its CSS in the Elements<\/strong> > Styles<\/strong> pane.<\/p>![\"The](\"https:\/\/i0.wp.com\/wd.imgix.net\/image\/NJdAV9UgKuN8AhoaPBquL7giZQo1\/j55nQO3vIZKKlu59ID15.png?w=1200&ssl=1\")
<\/figure>Mozilla Firefox<\/strong><\/span><\/h3>To open the developer tools in Mozilla Firefox:<\/p>
- Open the browser.<\/li>\n\n
- Press\u00a0
F12<\/code>\u00a0on the keyboard.- Optional: Press the
Ctrl+Shift+I<\/code> keys or click Menu<\/strong> > Web Development<\/strong> > Inspector<\/strong>.<\/li><\/ul><\/li><\/ol>You can open the developer tools by inspecting the element:<\/p>
- Open the browser<\/li>\n\n
- Right-click on the element to inspect.<\/li>\n\n
- Choose the option Inspect<\/strong> or Inspect element<\/strong>.<\/li>\n\n
- Optional: In the developer tools window, switch to the Elements<\/strong> panel.<\/li><\/ol>
Internet Explorer<\/strong><\/span><\/h3>To open the developer tools in Internet Explorer:<\/p>
- Open the browser.<\/li>\n\n
- Press\u00a0
F12<\/code>\u00a0on the keyboard.- Optional: Click Tools<\/strong> > F12 Developer Tools<\/strong>.<\/li><\/ul><\/li><\/ol>
You can open the developer tools by inspecting the element:<\/p>
- Open the browser<\/li>\n\n
- Right-click on the element to inspect.<\/li>\n\n
- Choose the option Inspect<\/strong> or Inspect element<\/strong>.<\/li>\n\n
- Optional: In the developer tools window, switch to the Elements<\/strong> panel.<\/li><\/ol>
Useful DevTools tips and tricks<\/strong><\/span><\/h2>Disable abusive debugger statements<\/strong><\/span><\/h3>Some websites aren\u2019t very nice to web developers. While they seem normal at first, as soon as you open DevTools, they immediately get stuck and pause at a JavaScript breakpoint, making it very hard to inspect the page.<\/p>
These websites achieve this by adding a debugger<\/code> statement in their code. This statement has no effect as long as DevTools is closed, but as soon as you open it, DevTools pauses the website\u2019s main thread.<\/p>If you ever find yourself in this situation, here is a way to get around it:<\/p>
- Open the Sources<\/strong> tool (called Debugger<\/strong> in Firefox).<\/li>\n\n
- Find the line where the debugger statement is. That shouldn\u2019t be hard since the debugger is currently paused there, so it should be visible right away.<\/li>\n\n
- Right-click on the line number next to this line.<\/li>\n\n
- In the context menu, choose Never pause here<\/strong>.<\/li>\n\n
- Refresh the page.<\/li><\/ol>
![\"A](\"https:\/\/i0.wp.com\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto%2Cq_80\/w_400\/https%3A\/\/files.smashing.media\/articles\/popular-devtools-tips\/11-disable-abusive-debugger-statements.png?w=1200&ssl=1\")
<\/a><\/figure>Visualize a page in 3D<\/strong><\/span><\/h2>The HTML and CSS code we write to create webpages gets parsed, interpreted, and transformed by the browser, which turns it into various tree-like data structures like the DOM, compositing layers, or the stacking context tree.<\/p>
While these data structures are mostly internal in-memory representations of a running webpage, it can sometimes be helpful to explore them and make sure things work as intended.<\/p>
A three-dimensional representation of these structures can help see things in a way that other representations can\u2019t. Plus, let\u2019s admit it, it\u2019s cool!<\/p>
Edge is the only browser that provides a tool dedicated to visualizing webpages in 3D in a variety of ways.<\/p>
- The easiest way to open it is by using the Command Menu<\/strong>. Press Ctrl<\/kbd>+Shift<\/kbd>+P<\/kbd> (or Cmd<\/kbd>+Shift<\/kbd>+P<\/kbd> on macOS), type \u201c3D\u201d and then press Enter<\/kbd>.<\/li>\n\n
- In the 3D View<\/strong> tool, choose between the three different modes: Z-Index<\/strong>, DOM<\/strong>, and Composited Layers<\/strong>.<\/li>\n\n
- Use your mouse cursor to pan, rotate, or zoom the 3D scene.<\/li><\/ol>
The Z-Index<\/strong> mode can be helpful to know which elements are stacking contexts and which are positioned on the z-axis.<\/p>The\u00a0DOM<\/strong>\u00a0mode can be used to easily see how deep your DOM tree is or find elements that are\u00a0outside of the viewport.<\/p>The Composited Layers<\/strong> mode shows all the different layers the browser rendering engine creates to paint the page as quickly as possible.<\/p>Edit & resend network requests<\/strong><\/span><\/h3>When working on your server-side logic or API, it may be useful to send a request over and over again without having to reload the entire client-side webpage and interact with it each time. Sometimes you just need to tweak a couple of request parameters to test something.<\/p>
One of the easiest ways to do this is by using Edge\u2019s Network Console<\/strong> tool or Firefox\u2019s Edit and Resend<\/strong> feature of the Network<\/strong> tool. Both of them allow you to start from an existing request, modify it, and resend it.<\/p>In Firefox:<\/p>
- Open the Network<\/strong> tool.<\/li>\n\n
Notepad++ is a powerful open-source code editor that Windows users can rely on to review and improve text within a website or web application. Although it may not have a unique aesthetic theme, it offers web developers a variety of features that can help them edit their projects and debug their code when necessary. <\/p>
Professionals may also prefer this DevTool because it supports 27 programming languages and provides synchronized views and edits.<\/p>
Django<\/strong><\/h3>Django is a Python framework that web developers can use on complex and popular websites and applications. This program is scalable and secure, and professionals can use it for small-scale projects or large web development projects. It helps create sites with less code, which can make the testing and revision process more efficient. <\/p>
Users may also enjoy a variety of Django’s utilities and packages that focus on creating a straightforward design and optimizing development.<\/p>
REST Assured<\/strong><\/h3>REST Assured may benefit web developers who work with Java because they can use it without HTTP expertise, and it allows users to validate and test code using simple programming languages. By automating elements of the boilerplate code, REST Assured can save professionals time. <\/p>
It also allows individuals to use notifications, such as given, when, and then, to simplify the testing process and send and receive requests and responses.<\/p>
Meteor<\/strong><\/h3>Meteor is a full-stack open-source framework that allows web developers to deploy and maintain desktop, web and mobile applications. It can easily integrate with a professional’s tech-stack, allowing users to devote their time to building and testing rather than identifying tools that can operate together. It can also provide professionals with application metrics in real-time allowing web developers to track the performance of their project and identify any issues that may require testing.<\/p>
Vim<\/strong><\/h3>Vim is a highly configurable code editor that professionals can also use to revise other content, including blog posts and emails. It provides users with over 200 syntax files and integrations with Python and TCL. <\/p>
It may require more time to understand than other options, but users may prefer it because it allows them to develop the ideal programming environment.<\/p>
Ruby on Rails<\/strong><\/h3>Ruby on Rails is a DevTool that may make it easy for users to read, write, maintain, test and deploy code, which means web developers may find it helpful for a variety of projects. It can also integrate with third-party applications and provide users with a straightforward design language. <\/p>
It may be useful for web developers who work independently rather than with a team of professionals because its intuitive workflow design can help them launch projects and make changes efficiently.<\/p>
Atom<\/strong><\/h3>Atom is a text editing DevTool that offers users a variety of customizable features that allow them to make the program meet their unique project testing requirements. Professionals can choose from thousands of Atom’s open-source packages and may use this tool with Linux, Mac, and Windows. <\/p>
It can also help individuals who are members of a professional team, as it provides users with several real-time collaboration tools to help professionals work alongside each other on a project.<\/p>
Ember<\/strong><\/h3>Ember is an open-source JavaScript tool and web framework with a user experience that professionals may prefer compared to other DevTools. The built-in development features include auto-reload, test runners and efficient rebuilds. <\/p>
It also allows users to create asynchronous relationships and may be ideal for remote work because it can keep models up to date across the platform.<\/p>
Foundation<\/strong><\/h3>Foundation is a front-end framework and DevTool that provides users with HTML, CSS and JavaScript templates to create and maintain code for websites and applications. This tool may be accessible to web developers with various levels of experience and training, and professionals can use it on a variety of devices. <\/p>
Users can also use it to create HTML code for emails that viewers can access on various platforms.<\/p>
HoppScotch<\/strong><\/h3>HoppScotch is an open-source web development tool with an appealing aesthetic design that professionals may prefer because of its advanced functionality. It can handle a variety of tasks, including creating full-duplex communication channels and adding translations for users with preferred languages other than English. <\/p>
It also provides users with collections to help them organize API requests and the ability to request and restore edits with a single click.<\/p>
How to open DevTools in your browser<\/strong><\/span><\/h2>Microsoft Edge<\/strong><\/span><\/h3>In Microsoft Edge, you can open DevTools by using the mouse or keyboard, in any of the following ways. Which tool is opened depends on how you open DevTools.<\/p>
Main ways:<\/strong><\/p>Action<\/th> Resulting tool<\/th><\/tr><\/thead> Right-click any item on a webpage, and then select Inspect<\/strong>.<\/td>The Elements<\/strong> tool, with the DOM tree expanded to show the right-clicked page element.<\/td><\/tr>Press Ctrl+Shift+I<\/strong> (Windows, Linux) or Command+Option+I<\/strong> (macOS).<\/td>The previously used tool, or the Welcome<\/strong> tool.<\/td><\/tr>Press F12<\/strong>.<\/td>The previously used tool, or the Welcome<\/strong> tool.<\/td><\/tr><\/tbody><\/table><\/figure>Additional ways:<\/strong><\/p>Action<\/th> Resulting tool<\/th><\/tr><\/thead> On the Microsoft Edge toolbar, select Settings and more<\/strong> () > More tools<\/strong> > Developer tools<\/strong>.<\/td>The previously used tool, or the Welcome<\/strong> tool.<\/td><\/tr>Press Ctrl+Shift+J<\/strong> (Windows, Linux) or Command+Option+J<\/strong> (macOS).<\/td>The Console<\/strong> tool.<\/td><\/tr>Press Ctrl+Shift+C<\/strong> (Windows, Linux) or Command+Option+C<\/strong> (macOS).<\/td>The Elements<\/strong> tool, with the DOM tree expanded to show the <body><\/code> element.<\/td><\/tr>Press Shift+F10<\/strong> to open the right-click menu. To select the Inspect<\/strong> command, press Up Arrow<\/strong> and then Enter<\/strong>.<\/td>The Elements<\/strong> tool, with the DOM tree expanded to show the <html><\/code> element.<\/td><\/tr>Press Tab<\/strong> or Shift+Tab<\/strong> to put focus on a page element. Then press Shift+F10<\/strong> to open the right-click menu. To select the Inspect<\/strong> command, press Up Arrow<\/strong> and then Enter<\/strong>.<\/td>The Elements<\/strong> tool, with the DOM tree expanded to show the focused page element.<\/td><\/tr><\/tbody><\/table><\/figure>Chrome<\/strong><\/span><\/h3>There are many ways to open Chrome DevTools. Choose your favorite way from this comprehensive reference.<\/p>
You can access DevTools using Chrome UI or keyboard:<\/p>
- From\u00a0drop-down menus in Chrome.<\/li>\n\n
- With dedicated\u00a0shortcuts\u00a0that open\u00a0Elements<\/strong>,\u00a0Console<\/strong>, or the last panel you used.<\/li><\/ul>
Open the Elements panel to inspect the DOM or CSS<\/strong><\/span><\/h5>To inspect, right-click an element on a page and select\u00a0Inspect<\/strong>. DevTools opens the Elements<\/strong> panel and selects the element in the DOM tree. In the\u00a0Styles<\/strong>\u00a0pane, you can see CSS rules applied to the selected element.<\/p><\/figure>Open the last panel you used from Chrome’s main menu<\/strong><\/span><\/h5>To open the last DevTools panel, click the button to the right of the address bar and select More Tools<\/strong> > Developer Tools<\/strong>.<\/p><\/figure>Alternatively, you can open the last panel with a shortcut. See the next section to learn more.<\/p>
Open panels with shortcuts: Elements, Console, or your last panel<\/strong><\/span><\/h5>If you prefer a keyboard, press a shortcut in Chrome depending on your operating system:<\/p>OS<\/th> Elements<\/th> Console<\/th> Your last panel<\/th><\/tr><\/thead> Windows or Linux<\/td> Ctrl<\/kbd> + Shift<\/kbd> + C<\/strong><\/td>Ctrl<\/kbd> + Shift<\/kbd> + J<\/strong><\/td>F12<\/kbd>
Ctrl<\/kbd> + Shift<\/kbd> + I<\/strong><\/td><\/tr>Mac<\/td> Cmd<\/kbd> + Option<\/kbd> + C<\/strong><\/td>Cmd<\/kbd> + Option<\/kbd> + J<\/strong><\/td>Fn<\/kbd> + F12<\/kbd>
Cmd<\/kbd> + Option<\/kbd> + I<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>Here’s an easy way to memorize the shortcuts:<\/p>
- C<\/strong> stands for CSS.<\/li>\n\n
- J<\/strong> for JavaScript.<\/li>\n\n
- I<\/strong> designates your choice.<\/li><\/ul>
The C<\/strong> shortcut opens the Elements<\/strong> panel in inspector mode. This mode shows you helpful tooltips when you hover over elements on a page. You can also click any element to view its CSS in the Elements<\/strong> > Styles<\/strong> pane.<\/p><\/figure>Mozilla Firefox<\/strong><\/span><\/h3>To open the developer tools in Mozilla Firefox:<\/p>
- Open the browser.<\/li>\n\n
- Press\u00a0
F12<\/code>\u00a0on the keyboard.- Optional: Press the
Ctrl+Shift+I<\/code> keys or click Menu<\/strong> > Web Development<\/strong> > Inspector<\/strong>.<\/li><\/ul><\/li><\/ol>You can open the developer tools by inspecting the element:<\/p>
- Open the browser<\/li>\n\n
- Right-click on the element to inspect.<\/li>\n\n
- Choose the option Inspect<\/strong> or Inspect element<\/strong>.<\/li>\n\n
- Optional: In the developer tools window, switch to the Elements<\/strong> panel.<\/li><\/ol>
Internet Explorer<\/strong><\/span><\/h3>To open the developer tools in Internet Explorer:<\/p>
- Open the browser.<\/li>\n\n
- Press\u00a0
F12<\/code>\u00a0on the keyboard.- Optional: Click Tools<\/strong> > F12 Developer Tools<\/strong>.<\/li><\/ul><\/li><\/ol>
You can open the developer tools by inspecting the element:<\/p>
- Open the browser<\/li>\n\n
- Right-click on the element to inspect.<\/li>\n\n
- Choose the option Inspect<\/strong> or Inspect element<\/strong>.<\/li>\n\n
- Optional: In the developer tools window, switch to the Elements<\/strong> panel.<\/li><\/ol>
Useful DevTools tips and tricks<\/strong><\/span><\/h2>Disable abusive debugger statements<\/strong><\/span><\/h3>Some websites aren\u2019t very nice to web developers. While they seem normal at first, as soon as you open DevTools, they immediately get stuck and pause at a JavaScript breakpoint, making it very hard to inspect the page.<\/p>
These websites achieve this by adding a debugger<\/code> statement in their code. This statement has no effect as long as DevTools is closed, but as soon as you open it, DevTools pauses the website\u2019s main thread.<\/p>If you ever find yourself in this situation, here is a way to get around it:<\/p>
- Open the Sources<\/strong> tool (called Debugger<\/strong> in Firefox).<\/li>\n\n
- Find the line where the debugger statement is. That shouldn\u2019t be hard since the debugger is currently paused there, so it should be visible right away.<\/li>\n\n
- Right-click on the line number next to this line.<\/li>\n\n
- In the context menu, choose Never pause here<\/strong>.<\/li>\n\n
- Refresh the page.<\/li><\/ol>
<\/a><\/figure>Visualize a page in 3D<\/strong><\/span><\/h2>The HTML and CSS code we write to create webpages gets parsed, interpreted, and transformed by the browser, which turns it into various tree-like data structures like the DOM, compositing layers, or the stacking context tree.<\/p>
While these data structures are mostly internal in-memory representations of a running webpage, it can sometimes be helpful to explore them and make sure things work as intended.<\/p>
A three-dimensional representation of these structures can help see things in a way that other representations can\u2019t. Plus, let\u2019s admit it, it\u2019s cool!<\/p>
Edge is the only browser that provides a tool dedicated to visualizing webpages in 3D in a variety of ways.<\/p>
- The easiest way to open it is by using the Command Menu<\/strong>. Press Ctrl<\/kbd>+Shift<\/kbd>+P<\/kbd> (or Cmd<\/kbd>+Shift<\/kbd>+P<\/kbd> on macOS), type \u201c3D\u201d and then press Enter<\/kbd>.<\/li>\n\n
- In the 3D View<\/strong> tool, choose between the three different modes: Z-Index<\/strong>, DOM<\/strong>, and Composited Layers<\/strong>.<\/li>\n\n
- Use your mouse cursor to pan, rotate, or zoom the 3D scene.<\/li><\/ol>
The Z-Index<\/strong> mode can be helpful to know which elements are stacking contexts and which are positioned on the z-axis.<\/p>The\u00a0DOM<\/strong>\u00a0mode can be used to easily see how deep your DOM tree is or find elements that are\u00a0outside of the viewport.<\/p>The Composited Layers<\/strong> mode shows all the different layers the browser rendering engine creates to paint the page as quickly as possible.<\/p>Edit & resend network requests<\/strong><\/span><\/h3>When working on your server-side logic or API, it may be useful to send a request over and over again without having to reload the entire client-side webpage and interact with it each time. Sometimes you just need to tweak a couple of request parameters to test something.<\/p>
One of the easiest ways to do this is by using Edge\u2019s Network Console<\/strong> tool or Firefox\u2019s Edit and Resend<\/strong> feature of the Network<\/strong> tool. Both of them allow you to start from an existing request, modify it, and resend it.<\/p>In Firefox:<\/p>
- Open the Network<\/strong> tool.<\/li>\n\n
REST Assured may benefit web developers who work with Java because they can use it without HTTP expertise, and it allows users to validate and test code using simple programming languages. By automating elements of the boilerplate code, REST Assured can save professionals time. <\/p>
It also allows individuals to use notifications, such as given, when, and then, to simplify the testing process and send and receive requests and responses.<\/p>
Meteor<\/strong><\/h3>Meteor is a full-stack open-source framework that allows web developers to deploy and maintain desktop, web and mobile applications. It can easily integrate with a professional’s tech-stack, allowing users to devote their time to building and testing rather than identifying tools that can operate together. It can also provide professionals with application metrics in real-time allowing web developers to track the performance of their project and identify any issues that may require testing.<\/p>
Vim<\/strong><\/h3>Vim is a highly configurable code editor that professionals can also use to revise other content, including blog posts and emails. It provides users with over 200 syntax files and integrations with Python and TCL. <\/p>
It may require more time to understand than other options, but users may prefer it because it allows them to develop the ideal programming environment.<\/p>
Ruby on Rails<\/strong><\/h3>Ruby on Rails is a DevTool that may make it easy for users to read, write, maintain, test and deploy code, which means web developers may find it helpful for a variety of projects. It can also integrate with third-party applications and provide users with a straightforward design language. <\/p>
It may be useful for web developers who work independently rather than with a team of professionals because its intuitive workflow design can help them launch projects and make changes efficiently.<\/p>
Atom<\/strong><\/h3>Atom is a text editing DevTool that offers users a variety of customizable features that allow them to make the program meet their unique project testing requirements. Professionals can choose from thousands of Atom’s open-source packages and may use this tool with Linux, Mac, and Windows. <\/p>
It can also help individuals who are members of a professional team, as it provides users with several real-time collaboration tools to help professionals work alongside each other on a project.<\/p>
Ember<\/strong><\/h3>Ember is an open-source JavaScript tool and web framework with a user experience that professionals may prefer compared to other DevTools. The built-in development features include auto-reload, test runners and efficient rebuilds. <\/p>
It also allows users to create asynchronous relationships and may be ideal for remote work because it can keep models up to date across the platform.<\/p>
Foundation<\/strong><\/h3>Foundation is a front-end framework and DevTool that provides users with HTML, CSS and JavaScript templates to create and maintain code for websites and applications. This tool may be accessible to web developers with various levels of experience and training, and professionals can use it on a variety of devices. <\/p>
Users can also use it to create HTML code for emails that viewers can access on various platforms.<\/p>
HoppScotch<\/strong><\/h3>HoppScotch is an open-source web development tool with an appealing aesthetic design that professionals may prefer because of its advanced functionality. It can handle a variety of tasks, including creating full-duplex communication channels and adding translations for users with preferred languages other than English. <\/p>
It also provides users with collections to help them organize API requests and the ability to request and restore edits with a single click.<\/p>
How to open DevTools in your browser<\/strong><\/span><\/h2>Microsoft Edge<\/strong><\/span><\/h3>In Microsoft Edge, you can open DevTools by using the mouse or keyboard, in any of the following ways. Which tool is opened depends on how you open DevTools.<\/p>
Main ways:<\/strong><\/p>Action<\/th> Resulting tool<\/th><\/tr><\/thead> Right-click any item on a webpage, and then select Inspect<\/strong>.<\/td>The Elements<\/strong> tool, with the DOM tree expanded to show the right-clicked page element.<\/td><\/tr>Press Ctrl+Shift+I<\/strong> (Windows, Linux) or Command+Option+I<\/strong> (macOS).<\/td>The previously used tool, or the Welcome<\/strong> tool.<\/td><\/tr>Press F12<\/strong>.<\/td>The previously used tool, or the Welcome<\/strong> tool.<\/td><\/tr><\/tbody><\/table><\/figure>Additional ways:<\/strong><\/p>Action<\/th> Resulting tool<\/th><\/tr><\/thead> On the Microsoft Edge toolbar, select Settings and more<\/strong> () > More tools<\/strong> > Developer tools<\/strong>.<\/td>The previously used tool, or the Welcome<\/strong> tool.<\/td><\/tr>Press Ctrl+Shift+J<\/strong> (Windows, Linux) or Command+Option+J<\/strong> (macOS).<\/td>The Console<\/strong> tool.<\/td><\/tr>Press Ctrl+Shift+C<\/strong> (Windows, Linux) or Command+Option+C<\/strong> (macOS).<\/td>The Elements<\/strong> tool, with the DOM tree expanded to show the <body><\/code> element.<\/td><\/tr>Press Shift+F10<\/strong> to open the right-click menu. To select the Inspect<\/strong> command, press Up Arrow<\/strong> and then Enter<\/strong>.<\/td>The Elements<\/strong> tool, with the DOM tree expanded to show the <html><\/code> element.<\/td><\/tr>Press Tab<\/strong> or Shift+Tab<\/strong> to put focus on a page element. Then press Shift+F10<\/strong> to open the right-click menu. To select the Inspect<\/strong> command, press Up Arrow<\/strong> and then Enter<\/strong>.<\/td>The Elements<\/strong> tool, with the DOM tree expanded to show the focused page element.<\/td><\/tr><\/tbody><\/table><\/figure>Chrome<\/strong><\/span><\/h3>There are many ways to open Chrome DevTools. Choose your favorite way from this comprehensive reference.<\/p>
You can access DevTools using Chrome UI or keyboard:<\/p>
- From\u00a0drop-down menus in Chrome.<\/li>\n\n
- With dedicated\u00a0shortcuts\u00a0that open\u00a0Elements<\/strong>,\u00a0Console<\/strong>, or the last panel you used.<\/li><\/ul>
Open the Elements panel to inspect the DOM or CSS<\/strong><\/span><\/h5>To inspect, right-click an element on a page and select\u00a0Inspect<\/strong>. DevTools opens the Elements<\/strong> panel and selects the element in the DOM tree. In the\u00a0Styles<\/strong>\u00a0pane, you can see CSS rules applied to the selected element.<\/p><\/figure>Open the last panel you used from Chrome’s main menu<\/strong><\/span><\/h5>To open the last DevTools panel, click the button to the right of the address bar and select More Tools<\/strong> > Developer Tools<\/strong>.<\/p><\/figure>Alternatively, you can open the last panel with a shortcut. See the next section to learn more.<\/p>
Open panels with shortcuts: Elements, Console, or your last panel<\/strong><\/span><\/h5>If you prefer a keyboard, press a shortcut in Chrome depending on your operating system:<\/p>OS<\/th> Elements<\/th> Console<\/th> Your last panel<\/th><\/tr><\/thead> Windows or Linux<\/td> Ctrl<\/kbd> + Shift<\/kbd> + C<\/strong><\/td>Ctrl<\/kbd> + Shift<\/kbd> + J<\/strong><\/td>F12<\/kbd>
Ctrl<\/kbd> + Shift<\/kbd> + I<\/strong><\/td><\/tr>Mac<\/td> Cmd<\/kbd> + Option<\/kbd> + C<\/strong><\/td>Cmd<\/kbd> + Option<\/kbd> + J<\/strong><\/td>Fn<\/kbd> + F12<\/kbd>
Cmd<\/kbd> + Option<\/kbd> + I<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>Here’s an easy way to memorize the shortcuts:<\/p>
- C<\/strong> stands for CSS.<\/li>\n\n
- J<\/strong> for JavaScript.<\/li>\n\n
- I<\/strong> designates your choice.<\/li><\/ul>
The C<\/strong> shortcut opens the Elements<\/strong> panel in inspector mode. This mode shows you helpful tooltips when you hover over elements on a page. You can also click any element to view its CSS in the Elements<\/strong> > Styles<\/strong> pane.<\/p><\/figure>Mozilla Firefox<\/strong><\/span><\/h3>To open the developer tools in Mozilla Firefox:<\/p>
- Open the browser.<\/li>\n\n
- Press\u00a0
F12<\/code>\u00a0on the keyboard.- Optional: Press the
Ctrl+Shift+I<\/code> keys or click Menu<\/strong> > Web Development<\/strong> > Inspector<\/strong>.<\/li><\/ul><\/li><\/ol>You can open the developer tools by inspecting the element:<\/p>
- Open the browser<\/li>\n\n
- Right-click on the element to inspect.<\/li>\n\n
- Choose the option Inspect<\/strong> or Inspect element<\/strong>.<\/li>\n\n
- Optional: In the developer tools window, switch to the Elements<\/strong> panel.<\/li><\/ol>
Internet Explorer<\/strong><\/span><\/h3>To open the developer tools in Internet Explorer:<\/p>
- Open the browser.<\/li>\n\n
- Press\u00a0
F12<\/code>\u00a0on the keyboard.- Optional: Click Tools<\/strong> > F12 Developer Tools<\/strong>.<\/li><\/ul><\/li><\/ol>
You can open the developer tools by inspecting the element:<\/p>
- Open the browser<\/li>\n\n
- Right-click on the element to inspect.<\/li>\n\n
- Choose the option Inspect<\/strong> or Inspect element<\/strong>.<\/li>\n\n
- Optional: In the developer tools window, switch to the Elements<\/strong> panel.<\/li><\/ol>
Useful DevTools tips and tricks<\/strong><\/span><\/h2>Disable abusive debugger statements<\/strong><\/span><\/h3>Some websites aren\u2019t very nice to web developers. While they seem normal at first, as soon as you open DevTools, they immediately get stuck and pause at a JavaScript breakpoint, making it very hard to inspect the page.<\/p>
These websites achieve this by adding a debugger<\/code> statement in their code. This statement has no effect as long as DevTools is closed, but as soon as you open it, DevTools pauses the website\u2019s main thread.<\/p>If you ever find yourself in this situation, here is a way to get around it:<\/p>
- Open the Sources<\/strong> tool (called Debugger<\/strong> in Firefox).<\/li>\n\n
- Find the line where the debugger statement is. That shouldn\u2019t be hard since the debugger is currently paused there, so it should be visible right away.<\/li>\n\n
- Right-click on the line number next to this line.<\/li>\n\n
- In the context menu, choose Never pause here<\/strong>.<\/li>\n\n
- Refresh the page.<\/li><\/ol>
<\/a><\/figure>Visualize a page in 3D<\/strong><\/span><\/h2>The HTML and CSS code we write to create webpages gets parsed, interpreted, and transformed by the browser, which turns it into various tree-like data structures like the DOM, compositing layers, or the stacking context tree.<\/p>
While these data structures are mostly internal in-memory representations of a running webpage, it can sometimes be helpful to explore them and make sure things work as intended.<\/p>
A three-dimensional representation of these structures can help see things in a way that other representations can\u2019t. Plus, let\u2019s admit it, it\u2019s cool!<\/p>
Edge is the only browser that provides a tool dedicated to visualizing webpages in 3D in a variety of ways.<\/p>
- The easiest way to open it is by using the Command Menu<\/strong>. Press Ctrl<\/kbd>+Shift<\/kbd>+P<\/kbd> (or Cmd<\/kbd>+Shift<\/kbd>+P<\/kbd> on macOS), type \u201c3D\u201d and then press Enter<\/kbd>.<\/li>\n\n
- In the 3D View<\/strong> tool, choose between the three different modes: Z-Index<\/strong>, DOM<\/strong>, and Composited Layers<\/strong>.<\/li>\n\n
- Use your mouse cursor to pan, rotate, or zoom the 3D scene.<\/li><\/ol>
The Z-Index<\/strong> mode can be helpful to know which elements are stacking contexts and which are positioned on the z-axis.<\/p>The\u00a0DOM<\/strong>\u00a0mode can be used to easily see how deep your DOM tree is or find elements that are\u00a0outside of the viewport.<\/p>The Composited Layers<\/strong> mode shows all the different layers the browser rendering engine creates to paint the page as quickly as possible.<\/p>Edit & resend network requests<\/strong><\/span><\/h3>When working on your server-side logic or API, it may be useful to send a request over and over again without having to reload the entire client-side webpage and interact with it each time. Sometimes you just need to tweak a couple of request parameters to test something.<\/p>
One of the easiest ways to do this is by using Edge\u2019s Network Console<\/strong> tool or Firefox\u2019s Edit and Resend<\/strong> feature of the Network<\/strong> tool. Both of them allow you to start from an existing request, modify it, and resend it.<\/p>In Firefox:<\/p>
- Open the Network<\/strong> tool.<\/li>\n\n
Vim is a highly configurable code editor that professionals can also use to revise other content, including blog posts and emails. It provides users with over 200 syntax files and integrations with Python and TCL. <\/p>
It may require more time to understand than other options, but users may prefer it because it allows them to develop the ideal programming environment.<\/p>
Ruby on Rails<\/strong><\/h3>Ruby on Rails is a DevTool that may make it easy for users to read, write, maintain, test and deploy code, which means web developers may find it helpful for a variety of projects. It can also integrate with third-party applications and provide users with a straightforward design language. <\/p>
It may be useful for web developers who work independently rather than with a team of professionals because its intuitive workflow design can help them launch projects and make changes efficiently.<\/p>
Atom<\/strong><\/h3>Atom is a text editing DevTool that offers users a variety of customizable features that allow them to make the program meet their unique project testing requirements. Professionals can choose from thousands of Atom’s open-source packages and may use this tool with Linux, Mac, and Windows. <\/p>
It can also help individuals who are members of a professional team, as it provides users with several real-time collaboration tools to help professionals work alongside each other on a project.<\/p>
Ember<\/strong><\/h3>Ember is an open-source JavaScript tool and web framework with a user experience that professionals may prefer compared to other DevTools. The built-in development features include auto-reload, test runners and efficient rebuilds. <\/p>
It also allows users to create asynchronous relationships and may be ideal for remote work because it can keep models up to date across the platform.<\/p>
Foundation<\/strong><\/h3>Foundation is a front-end framework and DevTool that provides users with HTML, CSS and JavaScript templates to create and maintain code for websites and applications. This tool may be accessible to web developers with various levels of experience and training, and professionals can use it on a variety of devices. <\/p>
Users can also use it to create HTML code for emails that viewers can access on various platforms.<\/p>
HoppScotch<\/strong><\/h3>HoppScotch is an open-source web development tool with an appealing aesthetic design that professionals may prefer because of its advanced functionality. It can handle a variety of tasks, including creating full-duplex communication channels and adding translations for users with preferred languages other than English. <\/p>
It also provides users with collections to help them organize API requests and the ability to request and restore edits with a single click.<\/p>
How to open DevTools in your browser<\/strong><\/span><\/h2>Microsoft Edge<\/strong><\/span><\/h3>In Microsoft Edge, you can open DevTools by using the mouse or keyboard, in any of the following ways. Which tool is opened depends on how you open DevTools.<\/p>
Main ways:<\/strong><\/p>Action<\/th> Resulting tool<\/th><\/tr><\/thead> Right-click any item on a webpage, and then select Inspect<\/strong>.<\/td>The Elements<\/strong> tool, with the DOM tree expanded to show the right-clicked page element.<\/td><\/tr>Press Ctrl+Shift+I<\/strong> (Windows, Linux) or Command+Option+I<\/strong> (macOS).<\/td>The previously used tool, or the Welcome<\/strong> tool.<\/td><\/tr>Press F12<\/strong>.<\/td>The previously used tool, or the Welcome<\/strong> tool.<\/td><\/tr><\/tbody><\/table><\/figure>Additional ways:<\/strong><\/p>Action<\/th> Resulting tool<\/th><\/tr><\/thead> On the Microsoft Edge toolbar, select Settings and more<\/strong> () > More tools<\/strong> > Developer tools<\/strong>.<\/td>The previously used tool, or the Welcome<\/strong> tool.<\/td><\/tr>Press Ctrl+Shift+J<\/strong> (Windows, Linux) or Command+Option+J<\/strong> (macOS).<\/td>The Console<\/strong> tool.<\/td><\/tr>Press Ctrl+Shift+C<\/strong> (Windows, Linux) or Command+Option+C<\/strong> (macOS).<\/td>The Elements<\/strong> tool, with the DOM tree expanded to show the <body><\/code> element.<\/td><\/tr>Press Shift+F10<\/strong> to open the right-click menu. To select the Inspect<\/strong> command, press Up Arrow<\/strong> and then Enter<\/strong>.<\/td>The Elements<\/strong> tool, with the DOM tree expanded to show the <html><\/code> element.<\/td><\/tr>Press Tab<\/strong> or Shift+Tab<\/strong> to put focus on a page element. Then press Shift+F10<\/strong> to open the right-click menu. To select the Inspect<\/strong> command, press Up Arrow<\/strong> and then Enter<\/strong>.<\/td>The Elements<\/strong> tool, with the DOM tree expanded to show the focused page element.<\/td><\/tr><\/tbody><\/table><\/figure>Chrome<\/strong><\/span><\/h3>There are many ways to open Chrome DevTools. Choose your favorite way from this comprehensive reference.<\/p>
You can access DevTools using Chrome UI or keyboard:<\/p>
- From\u00a0drop-down menus in Chrome.<\/li>\n\n
- With dedicated\u00a0shortcuts\u00a0that open\u00a0Elements<\/strong>,\u00a0Console<\/strong>, or the last panel you used.<\/li><\/ul>
Open the Elements panel to inspect the DOM or CSS<\/strong><\/span><\/h5>To inspect, right-click an element on a page and select\u00a0Inspect<\/strong>. DevTools opens the Elements<\/strong> panel and selects the element in the DOM tree. In the\u00a0Styles<\/strong>\u00a0pane, you can see CSS rules applied to the selected element.<\/p><\/figure>Open the last panel you used from Chrome’s main menu<\/strong><\/span><\/h5>To open the last DevTools panel, click the button to the right of the address bar and select More Tools<\/strong> > Developer Tools<\/strong>.<\/p><\/figure>Alternatively, you can open the last panel with a shortcut. See the next section to learn more.<\/p>
Open panels with shortcuts: Elements, Console, or your last panel<\/strong><\/span><\/h5>If you prefer a keyboard, press a shortcut in Chrome depending on your operating system:<\/p>OS<\/th> Elements<\/th> Console<\/th> Your last panel<\/th><\/tr><\/thead> Windows or Linux<\/td> Ctrl<\/kbd> + Shift<\/kbd> + C<\/strong><\/td>Ctrl<\/kbd> + Shift<\/kbd> + J<\/strong><\/td>F12<\/kbd>
Ctrl<\/kbd> + Shift<\/kbd> + I<\/strong><\/td><\/tr>Mac<\/td> Cmd<\/kbd> + Option<\/kbd> + C<\/strong><\/td>Cmd<\/kbd> + Option<\/kbd> + J<\/strong><\/td>Fn<\/kbd> + F12<\/kbd>
Cmd<\/kbd> + Option<\/kbd> + I<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>Here’s an easy way to memorize the shortcuts:<\/p>
- C<\/strong> stands for CSS.<\/li>\n\n
- J<\/strong> for JavaScript.<\/li>\n\n
- I<\/strong> designates your choice.<\/li><\/ul>
The C<\/strong> shortcut opens the Elements<\/strong> panel in inspector mode. This mode shows you helpful tooltips when you hover over elements on a page. You can also click any element to view its CSS in the Elements<\/strong> > Styles<\/strong> pane.<\/p><\/figure>Mozilla Firefox<\/strong><\/span><\/h3>To open the developer tools in Mozilla Firefox:<\/p>
- Open the browser.<\/li>\n\n
- Press\u00a0
F12<\/code>\u00a0on the keyboard.- Optional: Press the
Ctrl+Shift+I<\/code> keys or click Menu<\/strong> > Web Development<\/strong> > Inspector<\/strong>.<\/li><\/ul><\/li><\/ol>You can open the developer tools by inspecting the element:<\/p>
- Open the browser<\/li>\n\n
- Right-click on the element to inspect.<\/li>\n\n
- Choose the option Inspect<\/strong> or Inspect element<\/strong>.<\/li>\n\n
- Optional: In the developer tools window, switch to the Elements<\/strong> panel.<\/li><\/ol>
Internet Explorer<\/strong><\/span><\/h3>To open the developer tools in Internet Explorer:<\/p>
- Open the browser.<\/li>\n\n
- Press\u00a0
F12<\/code>\u00a0on the keyboard.- Optional: Click Tools<\/strong> > F12 Developer Tools<\/strong>.<\/li><\/ul><\/li><\/ol>
You can open the developer tools by inspecting the element:<\/p>
- Open the browser<\/li>\n\n
- Right-click on the element to inspect.<\/li>\n\n
- Choose the option Inspect<\/strong> or Inspect element<\/strong>.<\/li>\n\n
- Optional: In the developer tools window, switch to the Elements<\/strong> panel.<\/li><\/ol>
Useful DevTools tips and tricks<\/strong><\/span><\/h2>Disable abusive debugger statements<\/strong><\/span><\/h3>Some websites aren\u2019t very nice to web developers. While they seem normal at first, as soon as you open DevTools, they immediately get stuck and pause at a JavaScript breakpoint, making it very hard to inspect the page.<\/p>
These websites achieve this by adding a debugger<\/code> statement in their code. This statement has no effect as long as DevTools is closed, but as soon as you open it, DevTools pauses the website\u2019s main thread.<\/p>If you ever find yourself in this situation, here is a way to get around it:<\/p>
- Open the Sources<\/strong> tool (called Debugger<\/strong> in Firefox).<\/li>\n\n
- Find the line where the debugger statement is. That shouldn\u2019t be hard since the debugger is currently paused there, so it should be visible right away.<\/li>\n\n
- Right-click on the line number next to this line.<\/li>\n\n
- In the context menu, choose Never pause here<\/strong>.<\/li>\n\n
- Refresh the page.<\/li><\/ol>
<\/a><\/figure>Visualize a page in 3D<\/strong><\/span><\/h2>The HTML and CSS code we write to create webpages gets parsed, interpreted, and transformed by the browser, which turns it into various tree-like data structures like the DOM, compositing layers, or the stacking context tree.<\/p>
While these data structures are mostly internal in-memory representations of a running webpage, it can sometimes be helpful to explore them and make sure things work as intended.<\/p>
A three-dimensional representation of these structures can help see things in a way that other representations can\u2019t. Plus, let\u2019s admit it, it\u2019s cool!<\/p>
Edge is the only browser that provides a tool dedicated to visualizing webpages in 3D in a variety of ways.<\/p>
- The easiest way to open it is by using the Command Menu<\/strong>. Press Ctrl<\/kbd>+Shift<\/kbd>+P<\/kbd> (or Cmd<\/kbd>+Shift<\/kbd>+P<\/kbd> on macOS), type \u201c3D\u201d and then press Enter<\/kbd>.<\/li>\n\n
- In the 3D View<\/strong> tool, choose between the three different modes: Z-Index<\/strong>, DOM<\/strong>, and Composited Layers<\/strong>.<\/li>\n\n
- Use your mouse cursor to pan, rotate, or zoom the 3D scene.<\/li><\/ol>
The Z-Index<\/strong> mode can be helpful to know which elements are stacking contexts and which are positioned on the z-axis.<\/p>The\u00a0DOM<\/strong>\u00a0mode can be used to easily see how deep your DOM tree is or find elements that are\u00a0outside of the viewport.<\/p>The Composited Layers<\/strong> mode shows all the different layers the browser rendering engine creates to paint the page as quickly as possible.<\/p>Edit & resend network requests<\/strong><\/span><\/h3>When working on your server-side logic or API, it may be useful to send a request over and over again without having to reload the entire client-side webpage and interact with it each time. Sometimes you just need to tweak a couple of request parameters to test something.<\/p>
One of the easiest ways to do this is by using Edge\u2019s Network Console<\/strong> tool or Firefox\u2019s Edit and Resend<\/strong> feature of the Network<\/strong> tool. Both of them allow you to start from an existing request, modify it, and resend it.<\/p>In Firefox:<\/p>
- Open the Network<\/strong> tool.<\/li>\n\n
Atom is a text editing DevTool that offers users a variety of customizable features that allow them to make the program meet their unique project testing requirements. Professionals can choose from thousands of Atom’s open-source packages and may use this tool with Linux, Mac, and Windows. <\/p>
It can also help individuals who are members of a professional team, as it provides users with several real-time collaboration tools to help professionals work alongside each other on a project.<\/p>
Ember<\/strong><\/h3>Ember is an open-source JavaScript tool and web framework with a user experience that professionals may prefer compared to other DevTools. The built-in development features include auto-reload, test runners and efficient rebuilds. <\/p>
It also allows users to create asynchronous relationships and may be ideal for remote work because it can keep models up to date across the platform.<\/p>
Foundation<\/strong><\/h3>Foundation is a front-end framework and DevTool that provides users with HTML, CSS and JavaScript templates to create and maintain code for websites and applications. This tool may be accessible to web developers with various levels of experience and training, and professionals can use it on a variety of devices. <\/p>
Users can also use it to create HTML code for emails that viewers can access on various platforms.<\/p>
HoppScotch<\/strong><\/h3>HoppScotch is an open-source web development tool with an appealing aesthetic design that professionals may prefer because of its advanced functionality. It can handle a variety of tasks, including creating full-duplex communication channels and adding translations for users with preferred languages other than English. <\/p>
It also provides users with collections to help them organize API requests and the ability to request and restore edits with a single click.<\/p>
How to open DevTools in your browser<\/strong><\/span><\/h2>Microsoft Edge<\/strong><\/span><\/h3>In Microsoft Edge, you can open DevTools by using the mouse or keyboard, in any of the following ways. Which tool is opened depends on how you open DevTools.<\/p>
Main ways:<\/strong><\/p>Action<\/th> Resulting tool<\/th><\/tr><\/thead> Right-click any item on a webpage, and then select Inspect<\/strong>.<\/td>The Elements<\/strong> tool, with the DOM tree expanded to show the right-clicked page element.<\/td><\/tr>Press Ctrl+Shift+I<\/strong> (Windows, Linux) or Command+Option+I<\/strong> (macOS).<\/td>The previously used tool, or the Welcome<\/strong> tool.<\/td><\/tr>Press F12<\/strong>.<\/td>The previously used tool, or the Welcome<\/strong> tool.<\/td><\/tr><\/tbody><\/table><\/figure>Additional ways:<\/strong><\/p>Action<\/th> Resulting tool<\/th><\/tr><\/thead> On the Microsoft Edge toolbar, select Settings and more<\/strong> () > More tools<\/strong> > Developer tools<\/strong>.<\/td>The previously used tool, or the Welcome<\/strong> tool.<\/td><\/tr>Press Ctrl+Shift+J<\/strong> (Windows, Linux) or Command+Option+J<\/strong> (macOS).<\/td>The Console<\/strong> tool.<\/td><\/tr>Press Ctrl+Shift+C<\/strong> (Windows, Linux) or Command+Option+C<\/strong> (macOS).<\/td>The Elements<\/strong> tool, with the DOM tree expanded to show the <body><\/code> element.<\/td><\/tr>Press Shift+F10<\/strong> to open the right-click menu. To select the Inspect<\/strong> command, press Up Arrow<\/strong> and then Enter<\/strong>.<\/td>The Elements<\/strong> tool, with the DOM tree expanded to show the <html><\/code> element.<\/td><\/tr>Press Tab<\/strong> or Shift+Tab<\/strong> to put focus on a page element. Then press Shift+F10<\/strong> to open the right-click menu. To select the Inspect<\/strong> command, press Up Arrow<\/strong> and then Enter<\/strong>.<\/td>The Elements<\/strong> tool, with the DOM tree expanded to show the focused page element.<\/td><\/tr><\/tbody><\/table><\/figure>Chrome<\/strong><\/span><\/h3>There are many ways to open Chrome DevTools. Choose your favorite way from this comprehensive reference.<\/p>
You can access DevTools using Chrome UI or keyboard:<\/p>
- From\u00a0drop-down menus in Chrome.<\/li>\n\n
- With dedicated\u00a0shortcuts\u00a0that open\u00a0Elements<\/strong>,\u00a0Console<\/strong>, or the last panel you used.<\/li><\/ul>
Open the Elements panel to inspect the DOM or CSS<\/strong><\/span><\/h5>To inspect, right-click an element on a page and select\u00a0Inspect<\/strong>. DevTools opens the Elements<\/strong> panel and selects the element in the DOM tree. In the\u00a0Styles<\/strong>\u00a0pane, you can see CSS rules applied to the selected element.<\/p><\/figure>Open the last panel you used from Chrome’s main menu<\/strong><\/span><\/h5>To open the last DevTools panel, click the button to the right of the address bar and select More Tools<\/strong> > Developer Tools<\/strong>.<\/p><\/figure>Alternatively, you can open the last panel with a shortcut. See the next section to learn more.<\/p>
Open panels with shortcuts: Elements, Console, or your last panel<\/strong><\/span><\/h5>If you prefer a keyboard, press a shortcut in Chrome depending on your operating system:<\/p>OS<\/th> Elements<\/th> Console<\/th> Your last panel<\/th><\/tr><\/thead> Windows or Linux<\/td> Ctrl<\/kbd> + Shift<\/kbd> + C<\/strong><\/td>Ctrl<\/kbd> + Shift<\/kbd> + J<\/strong><\/td>F12<\/kbd>
Ctrl<\/kbd> + Shift<\/kbd> + I<\/strong><\/td><\/tr>Mac<\/td> Cmd<\/kbd> + Option<\/kbd> + C<\/strong><\/td>Cmd<\/kbd> + Option<\/kbd> + J<\/strong><\/td>Fn<\/kbd> + F12<\/kbd>
Cmd<\/kbd> + Option<\/kbd> + I<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>Here’s an easy way to memorize the shortcuts:<\/p>
- C<\/strong> stands for CSS.<\/li>\n\n
- J<\/strong> for JavaScript.<\/li>\n\n
- I<\/strong> designates your choice.<\/li><\/ul>
The C<\/strong> shortcut opens the Elements<\/strong> panel in inspector mode. This mode shows you helpful tooltips when you hover over elements on a page. You can also click any element to view its CSS in the Elements<\/strong> > Styles<\/strong> pane.<\/p><\/figure>Mozilla Firefox<\/strong><\/span><\/h3>To open the developer tools in Mozilla Firefox:<\/p>
- Open the browser.<\/li>\n\n
- Press\u00a0
F12<\/code>\u00a0on the keyboard.- Optional: Press the
Ctrl+Shift+I<\/code> keys or click Menu<\/strong> > Web Development<\/strong> > Inspector<\/strong>.<\/li><\/ul><\/li><\/ol>You can open the developer tools by inspecting the element:<\/p>
- Open the browser<\/li>\n\n
- Right-click on the element to inspect.<\/li>\n\n
- Choose the option Inspect<\/strong> or Inspect element<\/strong>.<\/li>\n\n
- Optional: In the developer tools window, switch to the Elements<\/strong> panel.<\/li><\/ol>
Internet Explorer<\/strong><\/span><\/h3>To open the developer tools in Internet Explorer:<\/p>
- Open the browser.<\/li>\n\n
- Press\u00a0
F12<\/code>\u00a0on the keyboard.- Optional: Click Tools<\/strong> > F12 Developer Tools<\/strong>.<\/li><\/ul><\/li><\/ol>
You can open the developer tools by inspecting the element:<\/p>
- Open the browser<\/li>\n\n
- Right-click on the element to inspect.<\/li>\n\n
- Choose the option Inspect<\/strong> or Inspect element<\/strong>.<\/li>\n\n
- Optional: In the developer tools window, switch to the Elements<\/strong> panel.<\/li><\/ol>
Useful DevTools tips and tricks<\/strong><\/span><\/h2>Disable abusive debugger statements<\/strong><\/span><\/h3>Some websites aren\u2019t very nice to web developers. While they seem normal at first, as soon as you open DevTools, they immediately get stuck and pause at a JavaScript breakpoint, making it very hard to inspect the page.<\/p>
These websites achieve this by adding a debugger<\/code> statement in their code. This statement has no effect as long as DevTools is closed, but as soon as you open it, DevTools pauses the website\u2019s main thread.<\/p>If you ever find yourself in this situation, here is a way to get around it:<\/p>
- Open the Sources<\/strong> tool (called Debugger<\/strong> in Firefox).<\/li>\n\n
- Find the line where the debugger statement is. That shouldn\u2019t be hard since the debugger is currently paused there, so it should be visible right away.<\/li>\n\n
- Right-click on the line number next to this line.<\/li>\n\n
- In the context menu, choose Never pause here<\/strong>.<\/li>\n\n
- Refresh the page.<\/li><\/ol>
<\/a><\/figure>Visualize a page in 3D<\/strong><\/span><\/h2>The HTML and CSS code we write to create webpages gets parsed, interpreted, and transformed by the browser, which turns it into various tree-like data structures like the DOM, compositing layers, or the stacking context tree.<\/p>
While these data structures are mostly internal in-memory representations of a running webpage, it can sometimes be helpful to explore them and make sure things work as intended.<\/p>
A three-dimensional representation of these structures can help see things in a way that other representations can\u2019t. Plus, let\u2019s admit it, it\u2019s cool!<\/p>
Edge is the only browser that provides a tool dedicated to visualizing webpages in 3D in a variety of ways.<\/p>
- The easiest way to open it is by using the Command Menu<\/strong>. Press Ctrl<\/kbd>+Shift<\/kbd>+P<\/kbd> (or Cmd<\/kbd>+Shift<\/kbd>+P<\/kbd> on macOS), type \u201c3D\u201d and then press Enter<\/kbd>.<\/li>\n\n
- In the 3D View<\/strong> tool, choose between the three different modes: Z-Index<\/strong>, DOM<\/strong>, and Composited Layers<\/strong>.<\/li>\n\n
- Use your mouse cursor to pan, rotate, or zoom the 3D scene.<\/li><\/ol>
The Z-Index<\/strong> mode can be helpful to know which elements are stacking contexts and which are positioned on the z-axis.<\/p>The\u00a0DOM<\/strong>\u00a0mode can be used to easily see how deep your DOM tree is or find elements that are\u00a0outside of the viewport.<\/p>The Composited Layers<\/strong> mode shows all the different layers the browser rendering engine creates to paint the page as quickly as possible.<\/p>Edit & resend network requests<\/strong><\/span><\/h3>When working on your server-side logic or API, it may be useful to send a request over and over again without having to reload the entire client-side webpage and interact with it each time. Sometimes you just need to tweak a couple of request parameters to test something.<\/p>
One of the easiest ways to do this is by using Edge\u2019s Network Console<\/strong> tool or Firefox\u2019s Edit and Resend<\/strong> feature of the Network<\/strong> tool. Both of them allow you to start from an existing request, modify it, and resend it.<\/p>In Firefox:<\/p>
- Open the Network<\/strong> tool.<\/li>\n\n
Foundation is a front-end framework and DevTool that provides users with HTML, CSS and JavaScript templates to create and maintain code for websites and applications. This tool may be accessible to web developers with various levels of experience and training, and professionals can use it on a variety of devices. <\/p>
Users can also use it to create HTML code for emails that viewers can access on various platforms.<\/p>
HoppScotch<\/strong><\/h3>HoppScotch is an open-source web development tool with an appealing aesthetic design that professionals may prefer because of its advanced functionality. It can handle a variety of tasks, including creating full-duplex communication channels and adding translations for users with preferred languages other than English. <\/p>
It also provides users with collections to help them organize API requests and the ability to request and restore edits with a single click.<\/p>
How to open DevTools in your browser<\/strong><\/span><\/h2>Microsoft Edge<\/strong><\/span><\/h3>In Microsoft Edge, you can open DevTools by using the mouse or keyboard, in any of the following ways. Which tool is opened depends on how you open DevTools.<\/p>
Main ways:<\/strong><\/p>Action<\/th> Resulting tool<\/th><\/tr><\/thead> Right-click any item on a webpage, and then select Inspect<\/strong>.<\/td>The Elements<\/strong> tool, with the DOM tree expanded to show the right-clicked page element.<\/td><\/tr>Press Ctrl+Shift+I<\/strong> (Windows, Linux) or Command+Option+I<\/strong> (macOS).<\/td>The previously used tool, or the Welcome<\/strong> tool.<\/td><\/tr>Press F12<\/strong>.<\/td>The previously used tool, or the Welcome<\/strong> tool.<\/td><\/tr><\/tbody><\/table><\/figure>Additional ways:<\/strong><\/p>Action<\/th> Resulting tool<\/th><\/tr><\/thead> On the Microsoft Edge toolbar, select Settings and more<\/strong> () > More tools<\/strong> > Developer tools<\/strong>.<\/td>The previously used tool, or the Welcome<\/strong> tool.<\/td><\/tr>Press Ctrl+Shift+J<\/strong> (Windows, Linux) or Command+Option+J<\/strong> (macOS).<\/td>The Console<\/strong> tool.<\/td><\/tr>Press Ctrl+Shift+C<\/strong> (Windows, Linux) or Command+Option+C<\/strong> (macOS).<\/td>The Elements<\/strong> tool, with the DOM tree expanded to show the <body><\/code> element.<\/td><\/tr>Press Shift+F10<\/strong> to open the right-click menu. To select the Inspect<\/strong> command, press Up Arrow<\/strong> and then Enter<\/strong>.<\/td>The Elements<\/strong> tool, with the DOM tree expanded to show the <html><\/code> element.<\/td><\/tr>Press Tab<\/strong> or Shift+Tab<\/strong> to put focus on a page element. Then press Shift+F10<\/strong> to open the right-click menu. To select the Inspect<\/strong> command, press Up Arrow<\/strong> and then Enter<\/strong>.<\/td>The Elements<\/strong> tool, with the DOM tree expanded to show the focused page element.<\/td><\/tr><\/tbody><\/table><\/figure>Chrome<\/strong><\/span><\/h3>There are many ways to open Chrome DevTools. Choose your favorite way from this comprehensive reference.<\/p>
You can access DevTools using Chrome UI or keyboard:<\/p>
- From\u00a0drop-down menus in Chrome.<\/li>\n\n
- With dedicated\u00a0shortcuts\u00a0that open\u00a0Elements<\/strong>,\u00a0Console<\/strong>, or the last panel you used.<\/li><\/ul>
Open the Elements panel to inspect the DOM or CSS<\/strong><\/span><\/h5>To inspect, right-click an element on a page and select\u00a0Inspect<\/strong>. DevTools opens the Elements<\/strong> panel and selects the element in the DOM tree. In the\u00a0Styles<\/strong>\u00a0pane, you can see CSS rules applied to the selected element.<\/p><\/figure>Open the last panel you used from Chrome’s main menu<\/strong><\/span><\/h5>To open the last DevTools panel, click the button to the right of the address bar and select More Tools<\/strong> > Developer Tools<\/strong>.<\/p><\/figure>Alternatively, you can open the last panel with a shortcut. See the next section to learn more.<\/p>
Open panels with shortcuts: Elements, Console, or your last panel<\/strong><\/span><\/h5>If you prefer a keyboard, press a shortcut in Chrome depending on your operating system:<\/p>OS<\/th> Elements<\/th> Console<\/th> Your last panel<\/th><\/tr><\/thead> Windows or Linux<\/td> Ctrl<\/kbd> + Shift<\/kbd> + C<\/strong><\/td>Ctrl<\/kbd> + Shift<\/kbd> + J<\/strong><\/td>F12<\/kbd>
Ctrl<\/kbd> + Shift<\/kbd> + I<\/strong><\/td><\/tr>Mac<\/td> Cmd<\/kbd> + Option<\/kbd> + C<\/strong><\/td>Cmd<\/kbd> + Option<\/kbd> + J<\/strong><\/td>Fn<\/kbd> + F12<\/kbd>
Cmd<\/kbd> + Option<\/kbd> + I<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>Here’s an easy way to memorize the shortcuts:<\/p>
- C<\/strong> stands for CSS.<\/li>\n\n
- J<\/strong> for JavaScript.<\/li>\n\n
- I<\/strong> designates your choice.<\/li><\/ul>
The C<\/strong> shortcut opens the Elements<\/strong> panel in inspector mode. This mode shows you helpful tooltips when you hover over elements on a page. You can also click any element to view its CSS in the Elements<\/strong> > Styles<\/strong> pane.<\/p><\/figure>Mozilla Firefox<\/strong><\/span><\/h3>To open the developer tools in Mozilla Firefox:<\/p>
- Open the browser.<\/li>\n\n
- Press\u00a0
F12<\/code>\u00a0on the keyboard.- Optional: Press the
Ctrl+Shift+I<\/code> keys or click Menu<\/strong> > Web Development<\/strong> > Inspector<\/strong>.<\/li><\/ul><\/li><\/ol>You can open the developer tools by inspecting the element:<\/p>
- Open the browser<\/li>\n\n
- Right-click on the element to inspect.<\/li>\n\n
- Choose the option Inspect<\/strong> or Inspect element<\/strong>.<\/li>\n\n
- Optional: In the developer tools window, switch to the Elements<\/strong> panel.<\/li><\/ol>
Internet Explorer<\/strong><\/span><\/h3>To open the developer tools in Internet Explorer:<\/p>
- Open the browser.<\/li>\n\n
- Press\u00a0
F12<\/code>\u00a0on the keyboard.- Optional: Click Tools<\/strong> > F12 Developer Tools<\/strong>.<\/li><\/ul><\/li><\/ol>
You can open the developer tools by inspecting the element:<\/p>
- Open the browser<\/li>\n\n
- Right-click on the element to inspect.<\/li>\n\n
- Choose the option Inspect<\/strong> or Inspect element<\/strong>.<\/li>\n\n
- Optional: In the developer tools window, switch to the Elements<\/strong> panel.<\/li><\/ol>
Useful DevTools tips and tricks<\/strong><\/span><\/h2>Disable abusive debugger statements<\/strong><\/span><\/h3>Some websites aren\u2019t very nice to web developers. While they seem normal at first, as soon as you open DevTools, they immediately get stuck and pause at a JavaScript breakpoint, making it very hard to inspect the page.<\/p>
These websites achieve this by adding a debugger<\/code> statement in their code. This statement has no effect as long as DevTools is closed, but as soon as you open it, DevTools pauses the website\u2019s main thread.<\/p>If you ever find yourself in this situation, here is a way to get around it:<\/p>
- Open the Sources<\/strong> tool (called Debugger<\/strong> in Firefox).<\/li>\n\n
- Find the line where the debugger statement is. That shouldn\u2019t be hard since the debugger is currently paused there, so it should be visible right away.<\/li>\n\n
- Right-click on the line number next to this line.<\/li>\n\n
- In the context menu, choose Never pause here<\/strong>.<\/li>\n\n
- Refresh the page.<\/li><\/ol>
<\/a><\/figure>Visualize a page in 3D<\/strong><\/span><\/h2>The HTML and CSS code we write to create webpages gets parsed, interpreted, and transformed by the browser, which turns it into various tree-like data structures like the DOM, compositing layers, or the stacking context tree.<\/p>
While these data structures are mostly internal in-memory representations of a running webpage, it can sometimes be helpful to explore them and make sure things work as intended.<\/p>
A three-dimensional representation of these structures can help see things in a way that other representations can\u2019t. Plus, let\u2019s admit it, it\u2019s cool!<\/p>
Edge is the only browser that provides a tool dedicated to visualizing webpages in 3D in a variety of ways.<\/p>
- The easiest way to open it is by using the Command Menu<\/strong>. Press Ctrl<\/kbd>+Shift<\/kbd>+P<\/kbd> (or Cmd<\/kbd>+Shift<\/kbd>+P<\/kbd> on macOS), type \u201c3D\u201d and then press Enter<\/kbd>.<\/li>\n\n
- In the 3D View<\/strong> tool, choose between the three different modes: Z-Index<\/strong>, DOM<\/strong>, and Composited Layers<\/strong>.<\/li>\n\n
- Use your mouse cursor to pan, rotate, or zoom the 3D scene.<\/li><\/ol>
The Z-Index<\/strong> mode can be helpful to know which elements are stacking contexts and which are positioned on the z-axis.<\/p>The\u00a0DOM<\/strong>\u00a0mode can be used to easily see how deep your DOM tree is or find elements that are\u00a0outside of the viewport.<\/p>The Composited Layers<\/strong> mode shows all the different layers the browser rendering engine creates to paint the page as quickly as possible.<\/p>Edit & resend network requests<\/strong><\/span><\/h3>When working on your server-side logic or API, it may be useful to send a request over and over again without having to reload the entire client-side webpage and interact with it each time. Sometimes you just need to tweak a couple of request parameters to test something.<\/p>
One of the easiest ways to do this is by using Edge\u2019s Network Console<\/strong> tool or Firefox\u2019s Edit and Resend<\/strong> feature of the Network<\/strong> tool. Both of them allow you to start from an existing request, modify it, and resend it.<\/p>In Firefox:<\/p>
- Open the Network<\/strong> tool.<\/li>\n\n
Microsoft Edge<\/strong><\/span><\/h3>In Microsoft Edge, you can open DevTools by using the mouse or keyboard, in any of the following ways. Which tool is opened depends on how you open DevTools.<\/p>
Main ways:<\/strong><\/p>Action<\/th> Resulting tool<\/th><\/tr><\/thead> Right-click any item on a webpage, and then select Inspect<\/strong>.<\/td>The Elements<\/strong> tool, with the DOM tree expanded to show the right-clicked page element.<\/td><\/tr>Press Ctrl+Shift+I<\/strong> (Windows, Linux) or Command+Option+I<\/strong> (macOS).<\/td>The previously used tool, or the Welcome<\/strong> tool.<\/td><\/tr>Press F12<\/strong>.<\/td>The previously used tool, or the Welcome<\/strong> tool.<\/td><\/tr><\/tbody><\/table><\/figure>Additional ways:<\/strong><\/p>Action<\/th> Resulting tool<\/th><\/tr><\/thead> On the Microsoft Edge toolbar, select Settings and more<\/strong> () > More tools<\/strong> > Developer tools<\/strong>.<\/td>The previously used tool, or the Welcome<\/strong> tool.<\/td><\/tr>Press Ctrl+Shift+J<\/strong> (Windows, Linux) or Command+Option+J<\/strong> (macOS).<\/td>The Console<\/strong> tool.<\/td><\/tr>Press Ctrl+Shift+C<\/strong> (Windows, Linux) or Command+Option+C<\/strong> (macOS).<\/td>The Elements<\/strong> tool, with the DOM tree expanded to show the <body><\/code> element.<\/td><\/tr>Press Shift+F10<\/strong> to open the right-click menu. To select the Inspect<\/strong> command, press Up Arrow<\/strong> and then Enter<\/strong>.<\/td>The Elements<\/strong> tool, with the DOM tree expanded to show the <html><\/code> element.<\/td><\/tr>Press Tab<\/strong> or Shift+Tab<\/strong> to put focus on a page element. Then press Shift+F10<\/strong> to open the right-click menu. To select the Inspect<\/strong> command, press Up Arrow<\/strong> and then Enter<\/strong>.<\/td>The Elements<\/strong> tool, with the DOM tree expanded to show the focused page element.<\/td><\/tr><\/tbody><\/table><\/figure>Chrome<\/strong><\/span><\/h3>There are many ways to open Chrome DevTools. Choose your favorite way from this comprehensive reference.<\/p>
You can access DevTools using Chrome UI or keyboard:<\/p>
- From\u00a0drop-down menus in Chrome.<\/li>\n\n
- With dedicated\u00a0shortcuts\u00a0that open\u00a0Elements<\/strong>,\u00a0Console<\/strong>, or the last panel you used.<\/li><\/ul>
Open the Elements panel to inspect the DOM or CSS<\/strong><\/span><\/h5>To inspect, right-click an element on a page and select\u00a0Inspect<\/strong>. DevTools opens the Elements<\/strong> panel and selects the element in the DOM tree. In the\u00a0Styles<\/strong>\u00a0pane, you can see CSS rules applied to the selected element.<\/p><\/figure>Open the last panel you used from Chrome’s main menu<\/strong><\/span><\/h5>To open the last DevTools panel, click the button to the right of the address bar and select More Tools<\/strong> > Developer Tools<\/strong>.<\/p><\/figure>Alternatively, you can open the last panel with a shortcut. See the next section to learn more.<\/p>
Open panels with shortcuts: Elements, Console, or your last panel<\/strong><\/span><\/h5>If you prefer a keyboard, press a shortcut in Chrome depending on your operating system:<\/p>OS<\/th> Elements<\/th> Console<\/th> Your last panel<\/th><\/tr><\/thead> Windows or Linux<\/td> Ctrl<\/kbd> + Shift<\/kbd> + C<\/strong><\/td>Ctrl<\/kbd> + Shift<\/kbd> + J<\/strong><\/td>F12<\/kbd>
Ctrl<\/kbd> + Shift<\/kbd> + I<\/strong><\/td><\/tr>Mac<\/td> Cmd<\/kbd> + Option<\/kbd> + C<\/strong><\/td>Cmd<\/kbd> + Option<\/kbd> + J<\/strong><\/td>Fn<\/kbd> + F12<\/kbd>
Cmd<\/kbd> + Option<\/kbd> + I<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>Here’s an easy way to memorize the shortcuts:<\/p>
- C<\/strong> stands for CSS.<\/li>\n\n
- J<\/strong> for JavaScript.<\/li>\n\n
- I<\/strong> designates your choice.<\/li><\/ul>
The C<\/strong> shortcut opens the Elements<\/strong> panel in inspector mode. This mode shows you helpful tooltips when you hover over elements on a page. You can also click any element to view its CSS in the Elements<\/strong> > Styles<\/strong> pane.<\/p><\/figure>Mozilla Firefox<\/strong><\/span><\/h3>To open the developer tools in Mozilla Firefox:<\/p>
- Open the browser.<\/li>\n\n
- Press\u00a0
F12<\/code>\u00a0on the keyboard.- Optional: Press the
Ctrl+Shift+I<\/code> keys or click Menu<\/strong> > Web Development<\/strong> > Inspector<\/strong>.<\/li><\/ul><\/li><\/ol>You can open the developer tools by inspecting the element:<\/p>
- Open the browser<\/li>\n\n
- Right-click on the element to inspect.<\/li>\n\n
- Choose the option Inspect<\/strong> or Inspect element<\/strong>.<\/li>\n\n
- Optional: In the developer tools window, switch to the Elements<\/strong> panel.<\/li><\/ol>
Internet Explorer<\/strong><\/span><\/h3>To open the developer tools in Internet Explorer:<\/p>
- Open the browser.<\/li>\n\n
- Press\u00a0
F12<\/code>\u00a0on the keyboard.- Optional: Click Tools<\/strong> > F12 Developer Tools<\/strong>.<\/li><\/ul><\/li><\/ol>
You can open the developer tools by inspecting the element:<\/p>
- Open the browser<\/li>\n\n
- Right-click on the element to inspect.<\/li>\n\n
- Choose the option Inspect<\/strong> or Inspect element<\/strong>.<\/li>\n\n
- Optional: In the developer tools window, switch to the Elements<\/strong> panel.<\/li><\/ol>
Useful DevTools tips and tricks<\/strong><\/span><\/h2>Disable abusive debugger statements<\/strong><\/span><\/h3>Some websites aren\u2019t very nice to web developers. While they seem normal at first, as soon as you open DevTools, they immediately get stuck and pause at a JavaScript breakpoint, making it very hard to inspect the page.<\/p>
These websites achieve this by adding a debugger<\/code> statement in their code. This statement has no effect as long as DevTools is closed, but as soon as you open it, DevTools pauses the website\u2019s main thread.<\/p>If you ever find yourself in this situation, here is a way to get around it:<\/p>
- Open the Sources<\/strong> tool (called Debugger<\/strong> in Firefox).<\/li>\n\n
- Find the line where the debugger statement is. That shouldn\u2019t be hard since the debugger is currently paused there, so it should be visible right away.<\/li>\n\n
- Right-click on the line number next to this line.<\/li>\n\n
- In the context menu, choose Never pause here<\/strong>.<\/li>\n\n
- Refresh the page.<\/li><\/ol>
<\/a><\/figure>Visualize a page in 3D<\/strong><\/span><\/h2>The HTML and CSS code we write to create webpages gets parsed, interpreted, and transformed by the browser, which turns it into various tree-like data structures like the DOM, compositing layers, or the stacking context tree.<\/p>
While these data structures are mostly internal in-memory representations of a running webpage, it can sometimes be helpful to explore them and make sure things work as intended.<\/p>
A three-dimensional representation of these structures can help see things in a way that other representations can\u2019t. Plus, let\u2019s admit it, it\u2019s cool!<\/p>
Edge is the only browser that provides a tool dedicated to visualizing webpages in 3D in a variety of ways.<\/p>
- The easiest way to open it is by using the Command Menu<\/strong>. Press Ctrl<\/kbd>+Shift<\/kbd>+P<\/kbd> (or Cmd<\/kbd>+Shift<\/kbd>+P<\/kbd> on macOS), type \u201c3D\u201d and then press Enter<\/kbd>.<\/li>\n\n
- In the 3D View<\/strong> tool, choose between the three different modes: Z-Index<\/strong>, DOM<\/strong>, and Composited Layers<\/strong>.<\/li>\n\n
- Use your mouse cursor to pan, rotate, or zoom the 3D scene.<\/li><\/ol>
The Z-Index<\/strong> mode can be helpful to know which elements are stacking contexts and which are positioned on the z-axis.<\/p>The\u00a0DOM<\/strong>\u00a0mode can be used to easily see how deep your DOM tree is or find elements that are\u00a0outside of the viewport.<\/p>The Composited Layers<\/strong> mode shows all the different layers the browser rendering engine creates to paint the page as quickly as possible.<\/p>Edit & resend network requests<\/strong><\/span><\/h3>When working on your server-side logic or API, it may be useful to send a request over and over again without having to reload the entire client-side webpage and interact with it each time. Sometimes you just need to tweak a couple of request parameters to test something.<\/p>
One of the easiest ways to do this is by using Edge\u2019s Network Console<\/strong> tool or Firefox\u2019s Edit and Resend<\/strong> feature of the Network<\/strong> tool. Both of them allow you to start from an existing request, modify it, and resend it.<\/p>In Firefox:<\/p>
- Open the Network<\/strong> tool.<\/li>\n\n
| Action<\/th> | Resulting tool<\/th><\/tr><\/thead> | ||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Right-click any item on a webpage, and then select Inspect<\/strong>.<\/td>| The Elements<\/strong> tool, with the DOM tree expanded to show the right-clicked page element.<\/td><\/tr> | Press Ctrl+Shift+I<\/strong> (Windows, Linux) or Command+Option+I<\/strong> (macOS).<\/td> | The previously used tool, or the Welcome<\/strong> tool.<\/td><\/tr> | Press F12<\/strong>.<\/td> | The previously used tool, or the Welcome<\/strong> tool.<\/td><\/tr><\/tbody><\/table><\/figure> | Additional ways:<\/strong><\/p> There are many ways to open Chrome DevTools. Choose your favorite way from this comprehensive reference.<\/p> You can access DevTools using Chrome UI or keyboard:<\/p> To inspect, right-click an element on a page and select\u00a0Inspect<\/strong>. DevTools opens the Elements<\/strong> panel and selects the element in the DOM tree. In the\u00a0Styles<\/strong>\u00a0pane, you can see CSS rules applied to the selected element.<\/p> To open the last DevTools panel, click the Alternatively, you can open the last panel with a shortcut. See the next section to learn more.<\/p> If you prefer a keyboard, press a shortcut in Chrome depending on your operating system:<\/p> Here’s an easy way to memorize the shortcuts:<\/p> The C<\/strong> shortcut opens the Elements<\/strong> panel in To open the developer tools in Mozilla Firefox:<\/p> You can open the developer tools by inspecting the element:<\/p> To open the developer tools in Internet Explorer:<\/p> You can open the developer tools by inspecting the element:<\/p> Some websites aren\u2019t very nice to web developers. While they seem normal at first, as soon as you open DevTools, they immediately get stuck and pause at a JavaScript breakpoint, making it very hard to inspect the page.<\/p> These websites achieve this by adding a If you ever find yourself in this situation, here is a way to get around it:<\/p> The HTML and CSS code we write to create webpages gets parsed, interpreted, and transformed by the browser, which turns it into various tree-like data structures like the DOM, compositing layers, or the stacking context tree.<\/p> While these data structures are mostly internal in-memory representations of a running webpage, it can sometimes be helpful to explore them and make sure things work as intended.<\/p> A three-dimensional representation of these structures can help see things in a way that other representations can\u2019t. Plus, let\u2019s admit it, it\u2019s cool!<\/p> Edge is the only browser that provides a tool dedicated to visualizing webpages in 3D in a variety of ways.<\/p> The Z-Index<\/strong> mode can be helpful to know which elements are stacking contexts and which are positioned on the z-axis.<\/p> The\u00a0DOM<\/strong>\u00a0mode can be used to easily see how deep your DOM tree is or find elements that are\u00a0outside of the viewport.<\/p> The Composited Layers<\/strong> mode shows all the different layers the browser rendering engine creates to paint the page as quickly as possible.<\/p> When working on your server-side logic or API, it may be useful to send a request over and over again without having to reload the entire client-side webpage and interact with it each time. Sometimes you just need to tweak a couple of request parameters to test something.<\/p> One of the easiest ways to do this is by using Edge\u2019s Network Console<\/strong> tool or Firefox\u2019s Edit and Resend<\/strong> feature of the Network<\/strong> tool. Both of them allow you to start from an existing request, modify it, and resend it.<\/p> In Firefox:<\/p> |
![\"A](\"https:\/\/i0.wp.com\/files.smashing.media\/articles\/popular-devtools-tips\/11-disable-abusive-debugger-statements.png?ssl=1\")
<\/a><\/figure>