By executing code one line or one function at a time, you can observe changes in the data and in the page to understand exactly what is happening. You can also modify data values used by the script, and you can even modify the script itself.

Why is this variable value 20 instead of 30? Why doesn't that line of code seem to have any effect? Why is this flag true when it should be false? Every developer faces these questions, and steps through code to find out.

After setting breakpoints, return to the page and use it normally until a breakpoint is reached. This pauses all JavaScript on the page, focus shifts to the DevTools Sources panel, and the breakpoint is highlighted. You can now selectively execute code and examine its data, step by step.

TL;DR

  • Step through code to observe issues before or while they happen and test out changes through live editing.
  • Prefer stepping over console logging, as logged data is already stale the moment it arrives in the console.
  • Enable the 'Async call stack' feature to gain greater visibility into the call stack of asynchronous functions.
  • Blackbox scripts to hide third-party code from your call stacks.
  • Use named functions rather than anonymous ones to improve call stack readability.

Stepping in action

All step options are represented through clickable icons  in the sidebar, but can also be triggered via shortcut. Here's the rundown:

Icon/Button Action Description
Resume Resumes execution up to the next breakpoint. If no breakpoint is encountered, normal execution is resumed.
Long Resume Resumes execution with breakpoints disabled for 500ms. Convenient for momentarily skipping breakpoints that would otherwise continually pause the code, e.g., a breakpoint inside a loop.

Click and hold Resume until expands to show the action.

Step Over Executes whatever happens on the next line and jumps to the next line.
Step Into If the next line contains a function call, Step Into will jump to and pause that function at its first line.
Step Out Executes the remainder of the current function and then pauses at the next statement after the function call.
Deactivate breakpoints Temporarily disables all breakpoints. Use to resume full execution without actually removing your breakpoints. Click it again to reactivate the breakpoints.
Pause on exceptions Automatically pauses the code when an exception occurs.

Use step into as your typical "one line at a time" action, as it ensures that only one statement gets executed, no matter what functions you step in and out of.

Use Pause on exceptions when you suspect an uncaught exception is causing a problem, but you don't know where it is. When this option is enabled, you can refine it by clicking the Pause On Caught Exceptions checkbox; in this case, execution is paused only when a specifically-handled exception occurs.

View properties by scope

When you pause a script, the Scope pane shows you all of the currently-defined properties at that moment in time.

The pane is highlighted in blue in the screenshot below.

The Scope pane is only populated when a script is paused. While your page is running, the Scope pane is empty.

The Scope pane shows you properties defined at the local, closure, and global levels.

If a property has a carat icon next to it, it means that it's an object. Click on the carat icon to expand the object and view its properties.

Sometimes properties are dimmed down. For example, the property constructor is dimmer than the confirm property in the screenshot below.

The darker properties are enumerable. The lighter, dimmed down properties are not. See the following Stack Overflow thread for more information: What do the colors mean in Chrome Developer Tools Scope panel?

The call stack

Near the top of the sidebar is the Call Stack section. When the code is paused at a breakpoint, the call stack shows the execution path, in reverse chronological order, that brought the code to that breakpoint. This is helpful in understanding not just where the execution is now, but how it got there, an important factor in debugging.

Example

An initial onclick event at line 50 in the index.html file called the setone() function at line 18 in the dgjs.js JavaScript file, which then called the setall() function at line 4 in the same file, where execution is paused at the current breakpoint.

 

Enable the async call stack

Enable the async call stack feature to gain more visibiliy into the execution of your asynchronous function calls.

  1. Open the Sources panel of DevTools.
  2. On the Call Stack pane, enable the Async checkbox.

The video below contains a simple script to demonstrate the async call stack feature. In the script, a third-party library is used to select a DOM element. A function called onClick is registered as theonclick event handler for the element. Whenever onClick is called, it in turn calls a function named f, which just forces the script to pause via the debugger keyword.

In the video, a breakpoint is triggered, and the call stack is expanded. There is only one call in the stack: f. The async call stack feature is then enabled, the script resumes, the breakpoint is triggered again, and then the call stack is expanded a second time. This time, the call stack contains all of the calls leading up to f, including third-party library calls, and the call to onClick. The first time that the script was called, there was only one call in the call stack. The second time, there were four. In short, the async call stack feature provides increased visibility into the full call stack of asynchronous functions.

Tip: name functions to improve call stack readability

Anonymous functions make the call stack difficult to read. Name your functions to improve readability.

The code snippets in the two screenshots below are functionally equivalent. The exact functioning of the code is not important, what is important is that the code in the first screenshot uses anonymous functions, while the second uses named functions.

In the call stack in the first screenshot, the top two functions are both just titled (anonymous function). In the second screenshot, the top two functions are named, which makes it easier to understand the program flow at a glance. When you are working with numerous script files, including third-party libraries and frameworks, and your call stack is five or ten calls deep, it is much easier to understand the call stack flow when functions are named.

Call stack with anonymous functions:

Call stack with named functions:

Blackbox third-party code

Blackbox script files to omit third-party files from your call stacks.

Before blackbox:

After blackbox:

To blackbox a file:

  1. Open DevTools Settings.

  1. In the navigation menu on the left, click Blackboxing.

  1. Click Add pattern.

  2. In the Pattern textfield enter the filename pattern that you wish to exclude from your call stack. DevTools excludes any scripts that match the pattern.

  1. In the dropdown menu to the right of the textfield, select Blackbox to execute the script files but exclude the calls from the call stack, or select Disabled to prevent the files from executing.

  2. Click Add to save.

The next time that you run the page and a breakpoint is triggered, DevTools hides any function calls from the blackboxed scripts from the call stack.

Data manipulation

When code execution is paused, you can observe and modify the data it is processing. This is crucial when trying to track down a variable that seems to have the wrong value or a passed parameter that isn't received as expected.

Show the Console drawer by clicking Show/Hide drawer  or press ESC. With the console open while stepping, you can now:

  • Type the name of a variable to see its current value in the scope of the current function
  • Type a JavaScript assignment statement to change the value

Try modifying values, then continue execution to see how it changes the outcome of your code and whether it behaves as you expect.

Example

We reveal that the value of the parameter dow is currently 2, but manually change it to 3 before resuming execution.

 

Live editing

Observing and pausing the executing code helps you locate errors, and live editing allows you to quickly preview changes without the need to reload.

To live edit a script, simply click into the editor part of the Sources panel while stepping. Make your changes as you would do in your editor, then commit the change with Ctrl + S (or Cmd + S on Mac). At this point, the entire JS file will be patched into the VM and all function definitions will be updated.

Now, you can resume execution; your modified script will execute in place of the original, and you can observe the effects of your changes.

Example

We suspect that the parameter dow is, in every case, off by +1 when it is passed to the function setone() – that is, the value of dow<, as received, is 1 when it should be 0, 2 when it should be 1, etc. To quickly test whether decrementing the passed value confirms that this is the problem, we add line 17 at the beginning of the function, commit with Ctrl + S and resume.

Managing thread execution

Use the Threads pane on the Sources panel to pause, step into, and inspect other threads, such as service worker or web worker threads.

To demonstrate the Threads pane, this section uses the following demo: Web Workers basic example.

If you open DevTools on the app, you can see that the main script is located in main.js:

And the web worker script is located in worker.js:

The main script listens to changes to the Multiply number 1 or Multiply number 2 input fields. Upon change the main script sends a message to the web worker with the values of the two numbers to multiply. The web worker does the multiplication and then passes the result back to the main script.

Suppose that you set a breakpoint in main.js that's triggered when the first number is changed:

And you also set a breakpoint in worker.js when the worker receives a message:

Modifying the first number on the app's UI triggers both of the breakpoints.

In the Threads pane the blue arrow indicates which thread is currently selected. For example, in the screenshot above the Main thread is selcted.

All of the DevTools controls for stepping through code (resume or pause script exection, step over next function call, step into next function call, etc.) pertain to that thread. In other words, if you pressed the Resume script execution button while your DevTools looked like the screenshot above, the Main thread would resume executing, but the web worker thread would still be paused. The Call Stack and Scope sections are only displaying information for the Main thread, too.

When you want to step through the code for the web worker thread, or see its scope and call stack information, just click on its label in the Threads pane, so that the blue arrow is next to it. The screenshot below shows how the call stack and scope information changes after selecting the worker thread. Again, if you were to press any of the stepping through code buttons (resume script execution, step over next function call, etc.), that action would only pertain to the worker thread. The Main thread is not affected.

How to step through your code in chrome的更多相关文章

  1. pycharm debug后会出现 step over /step into/step into my code /force step into /step out 分别表示

    1.debug,全部打印 2.打断点debug,出现单步调试等按钮,只运行断点前 3.setup over 调试一行代码 4.setup out 运行断点后面所有代码 5.debug窗口显示调试按钮 ...

  2. step over、step into、step into my code、step out、run to cursor

    红 step over 跳过子函数 黄 step into 进入子函数 蓝 step into my code 不执行源码的子函数执行自己的 黑 step out 跳出当前函数 绿 run to cu ...

  3. Visual Studio Code 通过 Chrome插件Type Script断点调试Angular 2

    1. 下载Visual Studio Code (https://code.visualstudio.com/) 2. 安装插件Debugger for chrome 3. 确定tsconfig.js ...

  4. 在 VS Code 和 Chrome 中调试

    先决条件 你必须安装好 Chrome 和 VS Code.同时请确保自己在 VS Code 中安装了 Debugger for Chrome 扩展的最新版本. 请通过 Vue CLI,遵循它的 REA ...

  5. Visual Code 调用Chrome 浏览HTML

    Code 使用快捷键:Ctrl+Shit+B 然后再Task.json,替换以下: { "version": "0.1.0", "command&qu ...

  6. Visual Studio Code 使用Chrome Debug 代码

    一.添加插件 Debugger for Chrome,点击安装,安装完成之后,启动 二.配置启动参数 1.按 F5,出现界面如图,选择 Chrome 2.然后会打开配置文件 launch.json 3 ...

  7. 【学习笔记】VS Code的launch.json 的 Python和Chrome常用配置(MacOS)

    遇到的问题: 1.无法直接用VS Code调用Chrome来打开HTML文件 2.VS Code调用Chrome成功后,Python解释器无法启动调试了 解决方法: 以下是我的 launch.json ...

  8. 利用chrome调试JavaScript代码

    看见网上很多人问怎么用chrome调试JavaScript代码,我也对这个问题抱着疑问,但是没有找到一篇能用的中文文章(可能我的google有问题),也不知道怎么点出一篇E文的,感觉作者写得不错,所以 ...

  9. High Performance Networking in Google Chrome

    小结: 1. 小文件存储于一个文件中: 在内部,磁盘缓存(disk cache)实现了它自己的一组数据结构, 它们被存储在一个单独的缓存目录里.其中有索引文件(在浏览器启动时加载到内存中),数据文件( ...

随机推荐

  1. Oracle分页函数(存储过程)

    create or replace package body Get_RecordByPage is StrSQL ); --分页函数 procedure GetRecordByPage(tblNam ...

  2. Sharepoint学习笔记—习题系列--70-576习题解析 -(Q131-Q134)

    Question  131 You are designing multiple SharePoint 2010 features. You have the following requiremen ...

  3. Intent属性详解三 data、type和extra

    1 Data  执行时要操作的数据 在目标<data/>标签中包含了以下几种子元素,他们定义了url的匹配规则: android:scheme 匹配url中的前缀,除了“http”.“ht ...

  4. 设置导航栏nav全透明

    设置导航栏nav全透明 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #ffffff } span.s1 { } ...

  5. SSIS 2010 BUG 一例

    Sample data :abc|"edfg|xyz Test 1: Text Qualified is  set to nothing. the result is in good for ...

  6. SqlServer--delete、truncate 、Drop删除表的区别

    --删除表中的全部数据,自动编号不清零. --1.delete from Biao --删除表中的全部数据,自动编号清零. --2.truncate table Biao --truncate特点: ...

  7. YourSQLDba备份失败案例锦集

    使用YourSQLDba做备份.维护.管理时,偶尔会收到一些备份失败的邮件.导致YourSQLDba备份失败的情况比价多,打算在此篇中对YourSQLDba备份失败的案例做一些总结.整理. 1:You ...

  8. MongoDB学习笔记~关于官方驱动集成IQueryable之后的一些事

    回到目录 关于官方驱动集成IQueryable之后的一些事,有好事也有坏事,好事就是它会将你的linq语句非常友好的翻译成MongoDB语句,而坏事就是有一些linq语句不会被翻译,不会被翻译的代价就 ...

  9. jquery2源码分析系列

    学习jquery的源码对于提高前端的能力很有帮助,下面的系列是我在网上看到的对jquery2的源码的分析.等有时间了好好研究下.我们知道jquery2开始就不支持IE6-8了,从jquery2的源码中 ...

  10. [原创]首次制作JQueryUI插件-Timeline时间轴

    特点: 1. 支持多左右滚动,左右拖动. 2. 时间轴可上下两种显示方式. 3. 支持两种模式的平滑滚动/拖动. 4. 行压缩(后续版本此处可设置是否开启,上传的代码不带这个功能). 5. 支持hov ...