placesrefa.blogg.se - Js script debugger

#Js script debugger how to#
#Js script debugger full#
#Js script debugger code#

We wanted to build something that was fast, easy to use, and adaptable-able to debug any new JavaScript frameworks that may emerge. JavaScript is essential to any advanced web app, so a strong debugger was a key part of the toolset.

And when a technology is open, it's free to grow beyond anything our small group at Mozilla can imagine. We wanted to rebuild DevTools using modern web technologies, to open them up to developers around the world.

#Js script debugger full#

The debugger.html project was launched about two years ago along with a full overhaul of all the Firefox DevTools.

#Js script debugger how to#

We've built a tutorial series to help developers learn how to effectively use the tool to debug their code. If you're interested in an in-depth walkthrough on the new debugger.html, head over to the Mozilla Developer Playground.

#Js script debugger code#

Here's developer Amit Zur explaining how he uses the Firefox debugger to dive into code at JS Kongress: The Debugger knows about components you're paused in and will show a simplified call stack, component outline, and properties.

The call stack is simplified so that you see your application code interleaved with the framework.įinally, debugger.html lets you see obfuscated or minified code that could be triggering errors, which is especially useful when you're dealing with common frameworks like React/Redux.

Pause and see component props and state.

Add breakpoints to the relevant functions.

See the component outline on the left (functions in the class).

Navigate to a component you want to debug.

You can also use debugger.html to debug your React/Redux apps.

You're trying to figure out why that damn button won't work.

You're debugging the same thing many times and want to see common values.

You're stepping and want to watch values change.

In the example above, you can add the expressions "title" and "to-do" and the debugger will spit out the values when they're available. Just type an expression in the Watch Expression field, and the debugger will keep an eye on it as you step through the code. We can also use a watch expression to keep an eye on the value of a variable.

"Step Over" steps across the current line of code, "Step In" steps into the function call, and "Step Out" runs the script until the current function exits. The play/pause button does just what it says on the tin. Now that the script is paused, we can step through it using the Toolbar. You can also dive into the Scopes panel to get the same info. You can see anchors and applets and children and all sorts of things: Large preview Hover over a variable to see the value and more. The code will pause at the addTodo function, and we can dive into the code to see the value of the input and more. In this example, we'll add a breakpoint to line 13 of the app.js file. Breakpoints tell the Debugger to pause on a line so you can click into the code to see what's going on. We can use debugger.html to dive deeper into the todo app by simply adding a breakpoint to a line of code. In this example, we'll use debugger.html to step through the todo app code to find the value of a variable. Just stick a call into your code to find the value of a variable, and you're set, right? Sure, that can work, but it can be cumbersome and time-consuming. It's tempting to use console.log to debug your code.