Chrome Developer Tools: script panel

Note: This article provides two translated articles for the chrome developer tools series.

See https://developers.google.com/chrome-developer-tools/docs/scripts for more information

Chrome Developer Tools: scripts panelchrome Developer Tools: script panel

TheScriptsPanel lets you debug your JavaScript code.

The script panel allows you to debug your JavaScript code

TheScriptsPanel provides a graphical interface to the V8 debugger. follow the steps below to release eScriptsPanel:

The script Panel provides a visual V8 debugger interface. Follow the steps below to open the script panel

• Open google closure hovercard demo page.
• Open google closure hovercard demo page
• Open the Developer Tools window as described in the how to access the Developer Tools section of this tutorial.
• Follow the instructions in the how to access the Developer Tools section to open the Development Tools window.
• If it is not already selected, selectScripts.
• If no script panel is selected, selectScripts 

TheScriptsPanel lets you see all the scripts that are part of the inspected page. standard controls to pause, resume, and step through code are provided below the Panel selection icons. A button to force a pause at specified tions is located at the bottom of the window. scripts are now (Canary) visible in separate tabs and by pressing the script navigator opens showing all the loaded scripts.

The script panel shows you all the scripts on this page. Under the Panel selection icon, there are standard controls such as pause, resume, and skip. There is a pause button at the bottom of the window when an exception occurs. The script is now visible in the separate tabs. Press and the script navigator opens and displays all loaded scripts.

You can set one or more breakpoints in one or more scripts. Click the line gutter to set a breakpoint for that line of code, select another script and set another breakpoint.

You can set one or more breakpoints in one or more scripts. Click the line gap of the Line Edge of the Code to set the breakpoint, select another script, and set another breakpoint.

All the breakpoints you have set appear underBreakpointsIn the right-hand sidebar. clicking on the entry jumps to the highlighted line in the source file. once you have a breakpoint set, right click on the blue tag breakpoint indicator to set a conditional statement for that breakpoint. type an expression and the breakpoint will only pause from then on only if the condition is true. delete a breakpoint by clicking the blue tag breakpoint indicator. the tag cycles through its three states of active, inactive, and removed.

All the breakpoints you set Breakpoints. Click to jump to the highlighted line of the source code. Once you set a breakpoint, right-click the blue tab indicator and set the breakpoint conditional expression. Input expression. The breakpoint is paused only when the condition is true. Click the blue breakpoint indicator label to delete a breakpoint.

 

Click the pause button then move your mouse over the Google closure hovercard demo page.

Click the pause button to move your mouse to the Google closure hovercard demo page.

While a script is paused, you can see the current call stack and In-scope variables in the right-hand side bar. when a script is paused, you can view the current call stack and variable in the range in the right-side bar.

 

There are several keyboard shortcuts available inScriptsPanel:

Several shortcuts can be used in the script panel.

• Continue: F8 or command-/(forward slash) on Mac or control-/(forward slash) on other platforms.
• Step over: F10 or command-'(apostrophe) on Mac or control-' (apostrophe) on other platforms.
• Step: F11 or command-; (semi-colon) on Mac or control-; (semi-colon); on other platforms.
• Step out: Shift-F11 or shift-command-; (semi-colon) on Mac or shift-control-; (semi-colon) on other platforms.
• Next Call Frame: Control-. (period) on all platforms.
• Previous call Frame: Control-, (comma) on all platforms.