Scripts Panel

lets you debug JavaScript; provides a graphical interface to the V8 debugger. lets you seel all that scripts that are part of the inspected page. Standard code controls (pause, resume, and step through) are provided below the panel selection icons. A button to force a pause at exceptions is 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. more than one breakpoint can be set in more than one script; click the line gutter to set a breakpoint for that line of code, select another script and then set another breakpoint.

set breakpoints can be viewed under the Breakpoints tab in the right-hand sidebar. Clicking on the entry jumps to the highlighted line in the source file. Once a breakpoint is 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. Clicking the blue tag breakpoint indicator will delete a breakpoint.

A paused script's current call stack and in-scope variables can be seen in the right-hand sidebar.

Keyboard shortcuts for the Scripts panel:

Hovercard Demo that was the basis for all of these screen shots; it can be able to practice along as well, instead of just reading this page.

01. The Sources Panel. If you do not see as many scripts as you expect, refresh the page with the Sources panel open. 02. This pane can be either hidden, auto-hidden or fixed. Click on the small icon to the right of ‘Content scripts’ to toggle between these states. This pane can be resized. 03. The Sources tab within the left-hand side pane; you’ll likely have this tab open most of the time. The resources it lists are separated by sub-domain, and you can expect to see CSS, JavaScript and HTML within the tab. 04. The Content Scripts tab (not active in the screenshot) may at first display many oddly named scripts. These are in fact Chrome extensions that loaded on the page. This is useful for debugging actual extensions. Otherwise, you can avoid seeing them by opening your page in an incognito window; most extensions are disabled by default in incognito mode. 05. The main content pane displays the contents of the selected script. Selecting multiple scripts creates a tabbed interface similar to an IDE. 06. This pane contains sub-panels that provide useful JavaScript debugging utilities. At the top of the pane are the icons to step through your code. 07. Watch Expressions does exactly that, it ‘watches’ expressions you have typed in. If you find yourself wanting to know the value of the this keyword at the various stages of a JavaScript program, you can watch the this keyword to see its different values over time. Click the add button to add an expression, and if an expression doesn’t update, hit the small refresh button next to the add button. 08. XHR Breakpoints enables us to halt JavaScript code execution when making an Ajax request. We get even more control over this behavior by supplying a value in the ‘Break when URL contains’ field, which pops up when you hit the add button. Providing no value causes the debugger to break upon any XHR request. 09. Event Listener breakpoints allow you to set break points for specific events. The screenshot only lists the top level categories. For example, ‘Timer’ has the following individual event listener breakpoints: ‘Set Timer’, ‘Clear Timer’ and ‘Timer Fired’. 10. If you encounter minified code, selecting ‘Pretty Print’ acts as a JavaScript beautifier. Source Tab lists resources grouped by the sub-domain they are served from. Each resource has a context menu (view via right-clicking on the resource) with common options. it is possible to view the source file list as a flat list (not contained within folders grouped by sub-domain) by unselecting "Show Folders" in Settings > General. clicking on a resource displays it in the main content pane. Pretty Print mode is available for minified resources. most files in the main content pane can be edited; changes are immediately reflected in-browser. Save is not permanent unless you select Save as (saves new version locally); tools are available to automate and accomodate this workflow. The resource's context menu has the option to reveal the resource in the network panel. Revision Revisions are new points within a resource's lifetime, upon which it has been modified. Editing and saving code from the sources panel creates a new revision, and style changes made within the Elements panel will trigger a new version. Upon editing, the resource's context menu adds the option to select Local Modifications, which opens up a new Local Modificiations pane which contains a diff of the original and edited files. Within the Local Modifications pane, we can revert a modified source file in its entirety by clicking "revert" located next to the filename. Main Content Pane main content pane is essentially a basic code editor, with features such as line numbers, syntax highlighting, ability to create tabs, and "undo" functionality. Breakpoints allow for JavaScript code execution to be paused for inspection of the current environment. add a breakpoint by clicking on the desired line number, or right-click on the line number and select the "Add Breakpoint" option. Set a breakpoint and refresh the page; notice that breakpoints persist between page loads. If the code has yet to be executed, like perhaps the breakpoint is set inside a click event handler, then code execution can be initated without page refresh.

Breakpoints can be hard coded by using the debugger; statement in your code. Most JavaScript debuggers recognize debugger; as a breakpoint.

When a breakpoint is reached the page will tint grey, while highlighting the line of code blue. Hitting the escape key will display the console panel. Interestingly, code written and executed within the console (while paused on a breakpoint) actually executes in the currently paused context. This being because typically this keyword refers to the global window object, whereas viewing this in an click event handler shows the value as an event target (an element).

Conditional breakpoints let you break when a certain condition is true, even on ajax requests.

dom breakpoints tab displays breakpoints in the dom, like setting a breakpoint on an element that has class="" names added or subtracted.

Timeline Panel panel is for investigating performance issues; it's primary purpose is for viewing data.

1 These three items (Events, Frames and Memory) present different views, each illustrating various pieces of performance-related information. 2 In this frames view, each bar represents a frame rendered by the browser. The more ‘full’ each vertical bar is, the worse the performance, and the colored portions in the bar are explained in the legend at the bottom of the Timeline panel. 3 A popover for individual records, detailing how long a record took to execute. The popover will, in some cases, link to the line of code that caused the record to execute (this is more likely to happen with script based records). 4 The list of records. Some records are triggered by our code; other records may be caused by the user’s actions. For example, scrolling the page causes a ‘Paint’ event. 5 Each record has a corresponding row that illustrates the length of time it took to complete. As shown in the screenshot, you can open some bars by clicking the dropdown arrow. 6 Filtering options that dictate what records to display. All records are shown by default. If you’re investigating a particular type of performance issue, you could clean up the recorded records by using the filtering options. 7 By default, all records are shown regardless of how long they took to complete. If you want to fish out those unusually long records, change from ‘All’ to one of the pre-defined options (such as 15ms). 8 This starts recording (just like in the Network panel). Be wary of letting it record for a long period of time; you’ll be bombarded with data! When looking at scrolling issues, I hit record, scroll the page for 2 seconds and then stop recording. Recording While recording, the Events Tab, Frames Tab, and Memory Tab are populated with data. Useful for detecting memory leaks, etc. Records in the Frames Tab Records are displayed before and after recording; network requests are blue, recalculate styles are purple, scripts are yellow, and green is page rendering. Click/hover over a record to display more information. http://net.tutsplus.com/tutorials/tools-and-tips/chrome-dev-tools-javascript-and-performance/ https://developers.google.com/chrome-developer-tools/docs/scripts" title="Scripts Panel - Chrome Developer Tools"> https://developers.google.com/chrome-developer-tools/docs/console" title="Using the Console