安装chrome或者firefox,在代码里面添加一个debugger,也可以在这两个浏览器的控制台添加断点

通过左边的内容源，打开对应的 JavaScript 文件，鼠标点击文件的行号就可以设置和删除断点。添加的每个断点都会出现在右侧调试区的 Breakpoints 列表中，点击列表中断点就会定位到内容区的断点上。如果你有多个文件、多个断点的话，利用Breakpoints 列表中的断点快速定位非常方便。

Javascript简介：

1、Javascript，一种高级编程语言，通过解释执行，是一门动态类型，面向对象（基于原型）的直译语言。它已经由欧洲电脑制造商协会通过ECMAScript实现语言的标准化。它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、IE、FireFox等）支持。

2、JavaScript是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。

这个问题很好。

Debug用来追踪代码的运行流程，通常在程序运行过程中出现异常，启用Debug模式可以分析定位异常发生的位置，以及在运行过程中参数的变化。通常我们也可以启用Debug模式来跟踪代码的运行流程去学习三方框架的源码。

如下是在IDEA中启动Debug模式，进入断点后的界面，我这里是Windows，可能和Mac的图标等会有些不一样。就简单说下图中标注的8个地方：

　　① 以Debug模式启动服务，左边的一个按钮则是以Run模式启动。在开发中，我一般会直接启动Debug模式，方便随时调试代码。

　　② 断点：在左边行号栏单击左键，或者快捷键Ctrl+F8 打上/取消断点，断点行的颜色可自己去设置。

　　③ Debug窗口：访问请求到达第一个断点后，会自动激活Debug窗口。如果没有自动激活，可以去设置里设置，如图1.2。

　　④ 调试按钮：一共有8个按钮，调试的主要功能就对应着这几个按钮，鼠标悬停在按钮上可以查看对应的快捷键。在菜单栏Run里可以找到同样的对应的功能，如图1.4。

　　⑤ 服务按钮：可以在这里关闭/启动服务，设置断点等。

　　⑥ 方法调用栈：这里显示了该线程调试所经过的所有方法，勾选右上角的[Show All Frames]按钮，就不会显示其它类库的方法了，否则这里会有一大堆的方法。

　　⑦ Variables：在变量区可以查看当前断点之前的当前方法内的变量。

　　⑧ Watches：查看变量，可以将Variables区中的变量拖到Watches中查看 

1. 介绍的过程还是以一个测试例子来演示，这样更直观也更容易理解

   使用谷歌浏览器打开一个测试的html文件，里面包含简单的js代码（只做演示）

   

2.  

   按F12打开网页调试工具，默认打开的是Elements，显示的是网页标签元素，如下图

   

3.  

   给js代码打断点，首先需要找到js资源文件，选择Source的tab标签，出现资源文件目录，选择对应的js代码文件

   

4.  

   在js代码文件左侧栏单击可以添加断点，再点击可以移除断点

   

5.  

   断点添加完成之后，F5刷新浏览器，可以看到代码执行到断点位置停了下来。光标放在变量名上，可以显示出变量值

   

6.  

   还可以选择一个表达式，可以直接显示出这个表达式执行的结果

   

7.  

   点击右侧单步跳转，可以逐行调试，也可以点击进入某个函数方法内部，可以从某个函数方法直接跳出，也可以点击第一个按钮，直接跳转到下一个断点或直接结束。下方可以看到断点的详细信息，如监控变量、调用栈、事件等。如下图所示

   

使用谷歌浏览器打开一个测试的html文件，里面包含简单的js代码（只做演示）

按F12打开网页调试工具，默认打开的是Elements，显示的是网页标签元素，如下图

给js代码打断点，首先需要找到js资源文件，选择Source的tab标签，出现资源文件目录，选择对应的js代码文件

在js代码文件左侧栏单击可以添加断点，再点击可以移除断点

断点添加完成之后，F5刷新浏览器，可以看到代码执行到断点位置停了下来。光标放在变量名上，可以显示出变量值

还可以选择一个表达式，可以直接显示出这个表达式执行的结果

点击右侧单步跳转，可以逐行调试，也可以点击进入某个函数方法内部，可以从某个函数方法直接跳出，也可以点击第一个按钮，直接跳转到下一个断点或直接结束。下方可以看到断点的详细信息，如监控变量、调用栈、事件等。如下图所示

在网页开发过程中，经常需要编写js代码来实现动态效果。如果js代码较少，逻辑较简单，往往没有啥问题。但有时候前端需要实现复杂的功能，这个时间js代码往往会很多，逻辑也会较复杂，对于初级程序员来说，调试问题往往难度较大。下面就来介绍下如何使用网页调试工具断点调试js代码

• javascript

• 谷歌浏览器

1. 介绍的过程还是以一个测试例子来演示，这样更直观也更容易理解

   使用谷歌浏览器打开一个测试的html文件，里面包含简单的js代码（只做演示）

   

2. 按F12打开网页调试工具，默认打开的是Elements，显示的是网页标签元素，如下图

   

3. 给js代码打断点，首先需要找到js资源文件，选择Source的tab标签，出现资源文件目录，选择对应的js代码文件

   

4. 在js代码文件左侧栏单击可以添加断点，再点击可以移除断点

   

5. 断点添加完成之后，F5刷新浏览器，可以看到代码执行到断点位置停了下来。光标放在变量名上，可以显示出变量值

   

6. 还可以选择一个表达式，可以直接显示出这个表达式执行的结果

   

7. 点击右侧单步跳转，可以逐行调试，也可以点击进入某个函数方法内部，可以从某个函数方法直接跳出，也可以点击第一个按钮，直接跳转到下一个断点或直接结束。下方可以看到断点的详细信息，如监控变量、调用栈、事件等。如下图所示

   

   END

• 断点对于初级程序员也一个很好的帮助工具，提供调试问题的效率

• 对于调试js代码，不打断点的话，可以通过console.log方式打印日志信息，也是不错的调试方法

通过左边的内容源，打开对应的 JavaScript 文件，鼠标点击文件的行号就可以设置和删除断点。添加的每个断点都会出现在右侧调试区的 Breakpoints 列表中，点击列表中断点就会定位到内容区的断点上。如果你有多个文件、多个断点的话，利用Breakpoints 列表中的断点快速定位非常方便。

Javascript简介：

1、Javascript，一种高级编程语言，通过解释执行，是一门动态类型，面向对象（基于原型）的直译语言。它已经由欧洲电脑制造商协会通过ECMAScript实现语言的标准化。它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、IE、FireFox等）支持。

2、JavaScript是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。

1. 1

   随便编写一段js代码

   31sublime如何快速的创建一个html页？

   

2. 2

   在浏览器中打开项目

   

3. 3

   按F12，点击Sources

   

4. 4

   选择要调试的文件名

   

5. 5

   点击要加断点的代码左侧

   

6. 6

   添加断点后如图

   

7. 7

   再次运行后可看到断点停留，F10下一步，F11进入，F5跳过

   

8. 8

   下一步效果如图，测试完成后记得把断点关闭