Debugger(Firefox)/ Sources(Chrome)
The Sources/Debugger UI panel watches JavaScript code and allows you to set breakpoints and watch the value of variables. Breakpoints are set at the places in the code where we want to pause the execution cycle and debug or identify the problems with the execution. With this panel, you debug the JavaScript.
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.
3. Watch expressions and breakpoints: These are the tools for inspecting the JavaScript of the page.
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.
Application:
- Pause code with breakpoints.
- Save changes to disk with workspaces.
- Run snippets of code from any page.
- Find unused JavaScript.
- Persist changes across page reloads with local overrides.
- Get a JavaScript debugging reference.
Browser Developer Tools
Every web-developer needs some basic set of tools for understanding the underlying structure of the code and enables us to inspect the web content. Developer tools are built directly into the browser. These are the tools that are browser dependent. Most of these tools are common among various browsers and do a range of things, from inspecting elements of a currently-loaded HTML, CSS, and JavaScript. With developer tools, we can directly interact with the source code that is fetched into the client side of our system. This article will explain such basic functionality of the browser’s devtools.
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.