Across all browsers, the basic functionality of the developer tools remains the same, only naming conventions and terminologies changes. In this article, we would be focusing the majority of sections on two popular browsers Firefox and Chrome.
How to open DevTools in the browser
There are many ways to open the Browser Developer Tools.
- To access the DOM or CSS of the webpage, right-click the desired element on the page and select Inspect. Or press Command+Option+C (Mac), Control+Shift+C/I (Windows, Linux, Chrome OS), or press F12 (Internet Explorer, Edge).
The Inspector tool allows you to see the HTML, CSS of the webpage that you are currently inspecting. With it, you can check what CSS is applied to each element on the page. It also allows you to preview instant changes to the HTML and CSS which are reflected live in the browser. These changes are not permanent and are reset once you refresh the browser window.
- Edit as HTML (Add attribute/Edit text): This allows to change the HTML and see the results in real-time. Most useful for debugging and testing.
- Create Node: Create another empty inner division.
- Duplicate Node: Create an exact copy of the division, along with the same attributes.
- Delete Node: Deletes the current element.
- Copy/ Copy as HTML: Copy HTML which is currently selected.
- Change Pseudo-Class (:hover/:active/:focus): It forces element states to be toggled on. Enabling us to view the particular styling on the element.
- Copy CSS Path/ Copy XPath: Most useful feature of Inspector (feature could be enabled manually) it allows to copy the CSS selector or XPath expression, this selects the current HTML element.
- Viewing and changing the DOM/ CSS
- Inspect and change HTML Pages.
- Inspect animations
- Find unused CSS.
- It also recognized type errors and gave us an error message for the wrong syntax.
- Viewing logged messages
- Preserve Log
- Group similar elements
- Log XmlHttpRequests
- Preserving live expression
3. Debugger(Firefox)/ Sources(Chrome)
This panel has three parts:
1. File list(Firefox)/ File Navigator(Chrome): Lists every file associated with the page that we are debugging.
2. Source code(Firefox)/ Code Editor(Chrome): Contents of the selected file is displayed in this panel. Breakpoints could also be set in this panel, where we want to pause execution.
There are two more sections that only appear when the code is running.
4. Call Stack: It shows you what code was executed to get to the current line.
5. Scopes: It shows the values which are visible from a different perspective from within the given code.
- Pause code with breakpoints.
- Save changes to disk with workspaces.
- Run snippets of code from any page.
- Persist changes across page reloads with local overrides.
3. Network Monitor
A Network panel is used to make sure what all resources that are being downloaded or uploaded are being done as expected. It enables us to view the network requests made when a page is loaded. It tells how long each request takes, and details of each request. The monitor is empty when it is loaded, the logs are created once any action is performed while the monitor is open.
Each row of Network Logs does represent a list of resources. These resources are listed according to the following structure:
- Status: The HTTP response code.
- Type: The resource type.
- Initiator: The Initiator column is a hyperlink that takes you to the source code of the request.
- Time: Time is taken by the request.
- Timeline/ Waterfall: Graphical representation of the various stage of these requests.
- Inspecting the properties of an individual resource (HTTP headers, content, size).
- Checking Network request list
- View Network traffic recording
- Creating Performance analysis
- Inspecting web sockets
- Inspecting server-sent events
- To throttle the network speed
4. Performance Tools
- Simulating a mobile CPU
- Recording runtime performance of our site
- Analyzing frame per second
- Finding the bottleneck capacity
- Animating CSS properties
5. Accessibility Inspector
This tool provides a way to access important information which is generally exposed to the assistive tech stack on the current view page via the accessibility tree present. It allows checking what element is missing or otherwise needs attention.
Accessibility is the practice of creating websites usable by as many of us, as much as possible. This tool tries the best to not prevent anyone from accessing information due to any kind of disability. Disability also includes any feature that a user is not able to use due to the lack of capabilities of the device which is being used to access the site. This may include the speed of their network connection, or their geographic location or locale.
The accessibility window is present as a tree diagram, representing all the items on the current page. Items having the nested children got these arrows that can be clicked to reveal the nesting level with the children.
- Fully keyboard controllable
- Print accessibility tree to JSON
- Show web page tabbing order
- Check for accessibility issues
- Simulate the webpage if viewed by a color-blind person
- Highlighting of UI items
- Check whether the item has the correct role set to it
We have discussed the 5 main tools present inside the browser DevTool panel that is most frequently used by any user. These tools are important for development as well from a testing and debugging point of view. Hence, it is always known to have such basic development and debugging tools, this would ease it