Highlights of the JavaScript debugger

Log without changing your codebase

Say goodbye to mistakes introduced during console logging and debugging.

Keep an eye on your properties

With watchpoints you can know when a property changes, when it is read, or even both, and pause execution at that point, rather than being limited to marking a specific line of code with a breakpoint.

devtools_watchpoint-nar.original.png

Learn to use watchpoints

Debug with your code, not transformed source

Mapping scopes and logpoints for sourcemaps means seeing your variables, not uglified library replacements. The source map backend perfects the illusion that you’re debugging your code, not transformed source from a framework, bundler, or compiler. Generating correct source maps can be challenging, so the DevTools team contributed patches to build tools, benefiting the whole ecosystem.

devtools_sourcemap-nar.original.png

Learn to use source maps

Troubleshoot WebSocket connections

Inspect data sent and received through a selected WS connection in a live-updated table. Either examine it raw, or parsed and displayed as a expandable tree, using a supported WS protocol.

devtools_websockets-nar.original.png

Learn to use the WebSocket Inspector

Better understand your async operations

When you work with frameworks, events are scheduled and fired based on the frameworks' scheduling logic, which is focused on not blocking the main thread. This results in unhelpful stacks that make it difficult to identify what triggered an event. In the Firefox DevTools, you see which frames have executed before an async operation, and easily trace the cause of an event.

devtools_async-nar.original.png

Run automated front-end tests

XPath (XML Path Language) search enables you to find nodes in the Inspector and determine whether they match a particular pattern. It is commonly used to surface elements for automated UI testing.

devtools_xpath-nar.original.png

Learn about DevTools' XPath search

Stay in your stack

Stepping into a function call or library method further down in the stack? Select the function you want in the Call Stack, and keep on stepping, knowing you'll remain in the same stack frame.

devtools_callstack-nar.original.png

Learn to step through code with the Firefox DevTools