What Is Chrome Developer Mode

What are browser programmer tools?

Every modern web browser includes a powerful suite of developer tools. These tools do a range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested and how long they took to load. This commodity explains how to use the basic functions of your browser's devtools.

Note: Before you run through the examples below, open up the Beginner'due south instance site that nosotros built during the Getting started with the Web commodity series. You lot should have this open up as you lot follow the steps below.

The devtools alive inside your browser in a subwindow that looks roughly like this, depending on what browser you are using:

How practise you pull it upwards? Iii means:

Keyboard: Ctrl + Shift + I , except
- Net Explorer and Edge: F12
- macOS: ⌘ + ⌥ + I
Menu bar:
- Firefox: Carte du jour ➤ Spider web Developer ➤ Toggle Tools, or Tools ➤ Spider web Programmer ➤ Toggle Tools
- Chrome: More tools ➤ Developer tools
- Safari: Develop ➤ Show Web Inspector. If you can't run across the Develop carte, go to Safari ➤ Preferences ➤ Advanced, and check the Prove Develop menu in menu bar checkbox.
- Opera: Developer ➤ Developer tools
Context menu: Press-and-hold/correct-click an item on a webpage (Ctrl-click on the Mac), and cull Inspect Chemical element from the context menu that appears. (An added bonus: this method straight-away highlights the lawmaking of the element you lot right-clicked.)

The Inspector: DOM explorer and CSS editor

The developer tools usually open up by default to the inspector, which looks something similar the post-obit screenshot. This tool shows what the HTML on your page looks similar at runtime, besides as what CSS is applied to each chemical element on the page. It also allows you to instantly change the HTML and CSS and encounter the results of your changes reflected alive in the browser viewport.

If you don't see the inspector,

Tap/click the Inspector tab.
In Internet Explorer, tap/click DOM Explorer, or press Ctrl + 1 .
In Microsoft Edge, or Opera, tap/click Elements.
In Safari, the controls are not so clearly presented, but you should come across the HTML if you oasis't selected something else to appear in the window. Press the Style button to see the CSS.

Exploring the DOM inspector

For a start, right-click (Ctrl-click) an HTML element in the DOM inspector and expect at the context menu. The bachelor menu options vary amidst browsers, but the important ones are mostly the same:

Delete Node (sometimes Delete Element). Deletes the current element.
Edit equally HTML (sometimes Add attribute/Edit text). Lets you change the HTML and meet the results on the fly. Very useful for debugging and testing.
:hover/:agile/:focus. Forces element states to exist toggled on, then you can see what their styling would await like.
Copy/Copy equally HTML. Copy the currently selected HTML.
Some browsers also have Copy CSS Path and Re-create XPath available, to allow you to copy the CSS selector or XPath expression that would select the current HTML element.

Attempt editing some of your DOM now. Double-click an chemical element, or correct-click information technology and choose Edit as HTML from the context card. You tin can make any changes y'all'd like, just y'all cannot save your changes.

Exploring the CSS editor

Past default, the CSS editor displays the CSS rules applied to the currently selected chemical element:

These features are especially handy:

The rules applied to the electric current chemical element are shown in order of virtually-to-least-specific.
Click the checkboxes next to each declaration to see what would happen if you removed the declaration.
Click the little arrow next to each shorthand belongings to prove the property's longhand equivalents.
Click a property name or value to bring up a text box, where you can primal in a new value to go a live preview of a way change.
Next to each rule is the file name and line number the rule is defined in. Clicking that rule causes the dev tools to spring to bear witness it in its own view, where information technology tin can by and large exist edited and saved.
Yous can also click the closing curly brace of any rule to bring up a text box on a new line, where you tin write a completely new declaration for your page.

You lot'll notice a number of clickable tabs at the height of the CSS Viewer:

Computed: This shows the computed styles for the currently selected element (the concluding, normalized values that the browser applies).
Layout: In Firefox, this area includes two sections:
- Box Model: represents visually the electric current chemical element'south box model, so you can see at a glance what padding, border and margin is applied to it, and how large its content is.
- Grid: If the page you are inspecting uses CSS Grid, this department allows you to view the grid details.
Fonts: In Firefox, the Fonts tab shows the fonts applied to the current element.

Find out more than

The JavaScript debugger

The JavaScript debugger allows you to watch the value of variables and prepare breakpoints, places in your code that you want to pause execution and identify the problems that prevent your code from executing properly.

To get to the debugger:

Firefox: Select ➤ Web Developer ➤ Debugger or press Ctrl + Shift + Southward to open the JavaScript Debugger. If the tools are already displayed, click on the Debugger tab.

Chrome: Open the Developer tools and then select the Sources tab. (Opera works the aforementioned fashion.)

Edge and Internet Explorer 11: Press F12 and and so, Ctrl + iii, or if the tools are already displayed, click on the Debugger tab.

Safari: Open the Developer Tools and then select the Debugger tab.

Exploring the debugger

There are three panes in the JavaScript Debugger on Firefox.

File list

The first pane on the left contains the list of files associated with the folio you lot are debugging. Select the file you want to work with from this list. Click on a file to select it and view its contents in the center pane of the Debugger.

Source lawmaking

Set breakpoints where you want to pause execution. In the following paradigm, the highlight on the number 18 shows that the line has a breakpoint prepare.

Scout expressions and breakpoints

The right-hand pane shows a list of the watch expressions you lot take added and breakpoints you have set up.

In the image, the get-go department, Watch expressions, shows that the listItems variable has been added. You can expand the list to view the values in the assortment.

The next section, Breakpoints, lists the breakpoints set on the page. In instance.js, a breakpoint has been assault the argument listItems.push(inputNewItem.value);

The final ii sections but appear when the lawmaking is running.

The Call stack section shows yous what code was executed to get to the current line. Yous can see that the lawmaking is in the part that handles a mouse click, and that the code is currently paused on the breakpoint.

The final section, Scopes, shows what values are visible from various points within your code. For example, in the image beneath, you tin see the objects available to the code in the addItemClick role.

Find out more

The JavaScript panel

The JavaScript console is an incredibly useful tool for debugging JavaScript that isn't working as expected. Information technology allows you to run lines of JavaScript against the page currently loaded in the browser, and reports the errors encountered every bit the browser tries to execute your code. To access the panel in any browser:

If the developer tools are already open, click or printing the Console tab.

If not, Firefox allows you to open up the console directly using Ctrl + Shift + K or using the carte control: Bill of fare ➤ Web Programmer ➤ Web Console, or Tools ➤ Spider web Developer ➤ Spider web Console. On other browser, open the developer tools then click the Console tab.

This will requite you a window like the following:

To see what happens, try entering the following snippets of code into the console one by one (and then pressing Enter):

                                          certificate.                      querySelector                      (                      'html'                      )                      .style.backgroundColor                      =                      'regal'                      ;

                                          const                      myWordmark                      =                      document.                      createElement                      (                      'img'                      )                      ;                      myWordmark.                      setAttribute                      (                      'src'                      ,                      'https://blog.mozilla.org/printing/wp-content/themes/OneMozilla/img/mozilla-wordmark.png'                      )                      ;                      certificate.                      querySelector                      (                      'h1'                      )                      .                      appendChild                      (myWordmark)                      ;

Now try entering the following incorrect versions of the code and run across what you get.

                                          certificate.                      cheeseSelector                      (                      'html'                      )                      .fashion.backgroundColor                      =                      'majestic'                      ;

                                          const                      myWordmark                      =                      document.                      createElement                      (                      'img'                      )                      ;                      myBanana.                      setAttribute                      (                      'src'                      ,                      'https://web log.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png'                      )                      ;                      document.                      querySelector                      (                      'h1'                      )                      .                      appendChild                      (myWordmark)                      ;

You'll start to see the kind of errors that the browser returns. Frequently these errors are fairly cryptic, but information technology should be pretty elementary to figure these problems out!