js代码如何断点debug调试

2021-04-06 19:09发布

13条回答
20200921文 - 做更棒的自己!
2楼 · 2021-04-07 11:12

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

三岁奶猫
3楼 · 2021-04-07 13:49

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

Javascript简介:

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

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


Sunny
4楼 · 2021-04-07 16:10

这个问题很好。


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.png

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

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

    js代码如何断点debug调试

  2.  

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

    js代码如何断点debug调试

  3.  

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

    js代码如何断点debug调试

  4.  

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

    js代码如何断点debug调试

  5.  

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

    js代码如何断点debug调试

  6.  

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

    js代码如何断点debug调试

  7.  

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

    js代码如何断点debug调试


浅浅77
6楼 · 2021-04-07 16:54

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

image.png

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

image.png

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

js代码如何断点debug调试

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

js代码如何断点debug调试

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

image.png

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

js代码如何断点debug调试

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

image.png

kitidog2016
7楼 · 2021-04-08 09:44

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

  • javascript

  • 谷歌浏览器

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

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

    js代码如何断点debug调试

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

    js代码如何断点debug调试

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

    js代码如何断点debug调试

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

    js代码如何断点debug调试

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

    js代码如何断点debug调试

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

    js代码如何断点debug调试

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

    js代码如何断点debug调试

    END

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

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


buzuofa100
8楼 · 2021-04-08 10:50

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

Javascript简介:

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

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


小橘子
9楼 · 2021-04-08 12:01
  1. 1

    随便编写一段js代码

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

    js代码如何进行调试?

  2. 2

    在浏览器中打开项目

    js代码如何进行调试?

  3. 3

    按F12,点击Sources

    js代码如何进行调试?

  4. 4

    选择要调试的文件名

    js代码如何进行调试?

  5. 5

    点击要加断点的代码左侧

    js代码如何进行调试?

  6. 6

    添加断点后如图

    js代码如何进行调试?

  7. 7

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

    js代码如何进行调试?

  8. 8

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

    js代码如何进行调试?