Chrome开发者工具Debug入门

者按： 手把手教你摆脱console.log，掌握高级的debug方法。

原文: Learn How To Debug JavaScript with Chrome DevTools
译者: Fundebug

为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。

作为一个刚入门的开发者，找到BUG的根源并修复通常要花费不少功夫。往往会尝试在代码中随机用console.log打印变量值来寻找问题。

这篇文章教会你正确的Debug姿势。你将会学会使用谷歌开发者工具(Chrome Developer Tools)来设置断点并单步执行代码。相比于打印日志，这样会高效得多。

本文针对一种特定类型的问题来演示如何使用谷歌开发者工具Debug，该方法同样适用于其它通用问题。

第一步：复现BUG

Debugging的第一步往往是复现bug。“复现BUG”是指找到一个行为序列可以100%触发bug。你需要复现bug很多遍，因此，尽量消除不必要的步骤。

参照下面的流程来复现这篇文章将要修复的一个bug：

这里有一个我们要使用到的网页。在新的标签打开它：打开Demo
在Number 1的输入框输入5
在Number 2的输入框输入1
点击Add Number 1 and Number 2按钮
在下方会输出5 + 1=51

应该输出为6, 而不是51。

Fundebug的JavaScript错误监控插件能够捕获各种前端BUG，并且记录用户行为，可以帮助你及时发现和复现BUG。

第二步：使用断点来暂停代码执行

谷歌开发者工具可以让你终端代码执行，并查看此时所有的变量值。用来中断执行的工具叫做breakpoint。如下操作：

回到Demo页面，打开开发者工具(Mac: Command + Option + I, Window, Linux: Control + Shift + I)。
点击Source标签
点击Event Listener Breakpoints，将里面的内容展开。开发者工具会展开一列，其中包含Animation，Clipboard
将鼠标移到Mouse前面, 点击三角展开里面的内容
选中click

回到demo，点击Add Number 1 and Number 2。开发者工具会将Demo的执行暂停，并且在Source部分高亮如下代码：

function onClick() {

为什么？

当你在Event Listener Breakpoints选择了Mouse click, 那么所有的点击事件都会被设置断点。因此，任何一个节点被点击，并且该节点有定义点击事件，那么开发者工具(DevTools)会自动在该点击事件Handler的第一行处暂停。

第三步：单步执行调试代码

一个常见的bug是：脚本的执行顺序错误。单步调试让你一步一步跟着代码的执行逻辑走，一次移动一行代码，那么你就会清楚代码是按照哪个的顺序执行的。我们来试一下：

在开发者工具的Source面板，点击第三个(Step into next function call)，

Step into next function call

该按钮引导你单步执行定义的点击事件，一次一行。点击后，第15行代码高亮：

现在点击第二个(Step over next function call)按钮

Step over next function call

该按钮会跳过当前要执行的函数inutsAreEmpty，而不是进入该函数。同时直接跳到第19行，因为当前输入框不为空。

这就是单步调试代码的基本思路。如果你仔细阅读get-started.js，会发现bug可能就隐藏在updateLabel函数的某个地方。除了使用单步调试以外，你还可以使用另一种断点。

第四步：设置另一个断点

如果你想在某一行设置断点，可以使用行断点(line-of-code breakpoint)。

找到updateLabel函数的最后一行，

label.textContent=addend1 + ' + ' + addend2 + '=' + sum;

在代码的左边，你可以看到显示的行号32。点击32，开发者工具会在行号出显示一个蓝色的标记。该标记表示行断点设置成功。代码总会在执行到这一行的时候中断。

点击第一个Resume script execution按钮

Resume script execution button

代码会持续执行到第32行。

在左侧，Local部分已经将addend1，addend2和sum的值都显示出来了。
你就会发现它们都是字符串，字符串相加就是将它们拼接起来，然而我们想要的是数字求和。

第五步：检查变量值

另一个常见的情况就是变量或则函数的返回值和期望值不一样。很多开发者都使用console.log来查看值的变化，但是使用console.log很麻烦而且非常低效。首先，你需要手动添加很多console.log，其次，在你还不清楚哪个变量会引发bug之前，你需要把很多变量值打印出来。

谷歌开发者工具一个很好的功能就是观察表达式(Watch Expressions)，可以一直监控变量值的变化。观察表达式不仅可以用于观察变量值，你可以用来监控任意表达式。我们来试一试：

在开发者面板下的Source面板，点击Watch,展开里面的内容(初次展开为空)。
点击右侧的+号(Add Expression)

Add Expression button

输入typeof sum
敲击回车键。开发者面板会显示typeof sum: "string"。

正如我们推测：sum的类型是字符串。

console.log的另一个替代品是直接使用Console。我么可以使用Console来执行任意的JavaScript表达式。开发者通常使用Console来重写变量值来debug。我们可以使用Console来验证可能的解决方案。

如果Console没有显示出来，敲击ESC键来打开。它会在开发者面板的最下方打开。
在Console中输入parseInt(addend1) + parseInt(addend2)
敲击回车键，输出6。

第六步：修复BUG

我们已经找到了潜在的修复方案，无需离开开发者面板，我们可以直接在开发者面板编辑源代码。

在开发者工具的Source面板，将源代码中var sum=addend1 + addend2替换为var sum=parseInt(addend1) + parseInt(addend2);。
保存改动(Mac: Command + S, Window, Linux: Control + S)。
点击第五个Deactivate breakpoints按钮

Deactivate breakpoints button

该按钮取消所有设置的断点。

点击第一个Resume script execution按钮

Resume script execution button

输入不同的值试一试，看看是否可以正常执行。

本文脱胎于Kayce Basques的一篇文章Get Started with Debugging JavaScript in Chrome DevTools。

原文作者：fundebug

dea 至于介绍就看官网就ok了，https://www.jetbrains.com/idea/download/other.html

一、基本用法&快捷键

Debug主要对应的是横向的一条和纵向的一条：

1、首先说第一组按钮，共8个按钮，从左到右依次如下：

Show Execution Point (Alt + F10)：如果光标在其它行或其它页面，点击这个按钮可跳转到当前代码执行的行。
Step Over (F8)：步过，一行一行地往下走，如果这一行上有方法不会进入方法。
Step Into (F7)：步入，如果当前行有方法，可以进入方法内部，一般用于进入自定义方法内，不会进入官方类库的方法。
Step Out (Shift + F8)：步出，从步入的方法内退出到方法调用处，此时方法已执行完毕，但还没有完成赋值。
Drop Frame (默认无)：回退断点，第八节详细说明
Run to Cursor (Alt + F9)：运行到光标处，你可以将光标定位到你需要查看的那一行，然后使用这个功能，代码会运行至光标行，而不需要打断点。

断点的右键：

enable：该断点是否是断点
Suspend：多线程断点
Condition：条件断点

查看断点处的某个对象的值，可以:alter + click，按住alter，然后点击想看的变量

二、计算表达式

计算表达式有两个作用：

查看表达式的值
设置表达式的值

设置表达式的值：

方法一：该案例是设置表达式的值a=20;

方法二：

在变量右键，set Value的值进行设置值。

三、方法断点

方法断点是三角形的断点，主要的作用是，点击F9，

进入到方法中第一行和最后的一行

在接口上打断点，当一个接口有多个实现类，在接口的方法上打断点，可以快速的定位到具体的实现类上

四、异常断点

哪里有异常，断点就会停留在哪儿，比如下面的空指针异常，程序会停留在报空指针异常的代码行中！

程序停止在抛出异常的那一行（使用这种方法寻找出现空指针的代码位置是非常容易的！）

五、字段断点

在设置复杂值的时候会看到，该值是如何变化的，就可以设置字段断点，在写的过程会停顿！！

在每次改变值的时候就会用到字段断点

第一次设置的age的值是10

第二次设置的值为：20

六、条件断点

debug的时候，i=50就直接进行停顿

七：调试的时候加载变化的代码

希望在调试的时候能加载到变化的代码：

avaScript 是网景（Netscape）公司开发的一种基于客户端浏览器、面向（基于）对象、事件驱动式的网页脚本语言。JavaScript语言的前身叫作Livescript。

JavaScript的特点：

简单、易学、易用；
跨平台；IE、Navigator
符合ECMA（欧洲计算机制造协会）标准，可移植；
事件驱动式的脚本程序设计思想；
动态、交互式的操作方式。

JavaScript的作用：

交互式操作；
表单验证；
网页特效；
Web游戏
服务器脚本开发等。

JavaScript的编写环境：

文本编辑器

JavaScript的执行平台：

Web浏览器

JavaScript的执行方式：

解释执行（由上而下）

JavaScript的版本：

JavaScript1.0——JavaScript1.4

浏览器对JavaScript的支持：

JavaScript/IE3.0、JavaScript1.2/IE4.0；

微软允许用户自行设置对JavaScript处理模式。

JavaScript与Java、VBScript、JScript的关系：

JavaScript与Java的区别体现在：

首先，它们是两个公司开发的不同的两个产品，Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发；而JavaScript是Netscape公司的产品，其目的是为了扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言。

其次，JavaScript是基于对象的，而Java是面向对象的，即Java是一种真正的面向对象的语言，即使是开发简单的程序，必须设计对象。JavaScript是种脚本语言，它可以用来制作与网络无关的，与用户交互作用的复杂软件。它是一种基于对象和事件驱动的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。

第三，两种语言在其浏览器中所执行的方式不一样。Java的源代码在传递到客户端执行之前，必须经过编译，因而客户端上必须具有相应平台上的仿真器或解释器，它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户，由浏览器解释执行。

第四，两种语言所采取的变量是不一样的。Java采用强类型变量检查，即所有变量在编译之前必须作声明。JavaScript中变量声明，采用其弱类型。即变量在使用前不需作声明，而是解释器在运行时检查其数据类型。

第五，代码格式不一样。Java是一种与HTML无关的格式，必须通过像HTML中引用外媒体那么进行装载，其代码以字节代码的形式保存在独立的文档中。JavaScript的代码是一种文本字符格式，可以直接嵌入HTML文档中，并且可动态装载。编写HTML文档就像编辑文本文件一样方便。

第六，嵌入方式不一样。在HTML文档中，两种编程语言的标识不同，JavaScript使用<script>...</script>来标识，而Java使用<applet> ... </applet> 来标识。

第七，静态绑定和动态绑定。Java采用静态联编，即Java的对象引用必须在编译时的进行，以使编译器能够实现强类型检查，如不经编译则就无法实现对象引用的检查。JavaScript采用动态联编，即JavaScript的对象引用在运行时进行检查。

JavaScript学习教程

如果想要更高效、更系统地学会javascript，最好采用边学边练的学习模式。

今天分享的这套JavaScript学习教程，讲解了前端开发中的核心技术JavaScript，俗称JS

内容涵盖：JavaScript核心语法、JavaScript内置支持类、JavaScript调试、JavaScript DOM编程、JavaScript BOM编程、大量前端小案例、JavaScript事件处理、JavaScript对象、继承、JSON等知识点，该视频可以开启你的WEB前端之路。

课程目录

1. .JavaScript教程-JavaScript概述

2. .JavaScript教程-HTML嵌入JavaScript代码的第一种方式1

3. .JavaScript教程-HTML嵌入JavaScript代码的第一种方式2

4. .JavaScript教程-HTML嵌入JavaScript代码的第二种方式

5. .JavaScript教程-HTML嵌入JavaScript代码的第三种方式

6. JavaScript教程-JS的标识符

7. .JavaScript教程-JS的变量1

8. .JavaScript教程-JS的变量2

9. JavaScript教程-JS的函数初步1

10. .JavaScript教程-JS的函数初步2

11. .JavaScript教程-全局变量和局部变量

12. .JavaScript教程-JS的数据类型

13. .JavaScript教程-Undefined数据类型

14. .JavaScript教程-Number数据类型

15. .JavaScript教程-Boolean数据类型

16. .JavaScript教程-回顾数据类型

17. .JavaScript教程-String数据类型

18. .JavaScript教程-Object数据类型

19. JavaScript教程-Object数据类型2

20. .JavaScript教程-Object数据类型3

21. .JavaScript教程-null undefined NaN的区别以及等同和全等运算符

22. .JavaScript教程-JS的常用事件

23. .JavaScript教程-回调函数的概念

24. .JavaScript教程-注册事件的两种方式

25. JavaScript教程-JS代码的执行顺序

26. .JavaScript教程-JS代码的执行顺序2

27. JavaScript教程-捕捉回车键

28. .JavaScript教程-捕捉回车键2

29. .JavaScript教程-void运算符

30. .JavaScript教程-JS的控制语句

31. JavaScript教程-设置和获取文本框的value

32. JavaScript教程-innerHTML和innerText属性

33. .JavaScript教程-正则表达式

34. .JavaScript教程-邮箱地址的正则表达式

35. JavaScript教程-扩展字符串的trim函数

36. .JavaScript教程-回顾JS

37. JavaScript教程-表单验证

38. JavaScript教程-表单验证2

39. JavaScript教程-表单验证3

40. .JavaScript教程-表单验证4

41. .JavaScript教程-复选框的全选和取消全选

42. .JavaScript教程-获取下拉列表选中项的value

43. .JavaScript教程-周期函数setInterval

44. .JavaScript教程-内置支持类Array

45. .JavaScript教程-BOM编程window的open和close

46. .JavaScript教程-BOM编程弹出确认框

47. .JavaScript教程-（补录）-将当前窗口设置为顶级窗口

48. .JavaScript教程-BOM编程history和location对象

49. .JavaScript教程-JSON在开发中的使用

50. .JavaScript教程-JSON在开发中的使用2

51. JavaScript教程-JSON在开发中的使用3

52. .JavaScript教程-JSON在开发中的使用4

53. JavaScript教程-JSON在开发中的使用5

关注+转发本文后私信扣“1”

在线咨询

上一篇：HTML 文件路径
下一篇：HTML5开启移动互联时代新大陆

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商