调试js方法,js调试工具的基本功能

本文目录一览：

• 1、如何调试JS?
• 2、dreamweaver里如何调试javascript代码
• 3、有哪些 JS 调试技巧？
• 4、chrome 如何调试js
• 5、如何进行html调试和js脚本调试
• 6、有哪些 JS 调试技巧

如何调试JS?

说下几种方法吧：br1.用alert 这个最最直观 把你想要的内容弹出来给你看，但是要看哪里 就要在哪里加，比较麻烦br2.用firefox 或者chrome浏览器 里面有debug工具的br3.如果想用ie来debug的话 记得用ie8 或者以上版本

dreamweaver里如何调试javascript代码

目前，常用的浏览器IE、Chrome、Firefox都有相应的脚本调试功能。我们先来看IE的：

1、在F12开发人员工具中进行调试

打开IE浏览器，按下F12键，就会打开开发人员工具，这是IE内置的开发人员开发工具，方便开发人员对HTML、CSS、Javascript等网页资源进行跟踪调试使用的。

如果你打开的时候没有固定在网页底部，可以点击右上角菜单栏中的按钮来完成。

我们看到在这个工具窗口里面有几个标签页，分别是：HTML、CSS、控制台、脚本、探查器和网络，点开每一个标签，可以执行相应的任务。

在HTML标签窗口中，工具栏中的按钮所执行的操作如下图：

CSS标签是用来查看样式的；控制台显示网页中JS的各种输出信息，包括错误信息、用户日志等；打开脚本标签页，这里面才是我们想要的内容。

我在图中用黄色矩形选中连个控件，左侧的下拉列表用来选择文件，右侧的按钮用来启动调试。当点击启动调试后，调试程序会将窗口最大化，我们在选中的文件中找到需要调试的位置，点击左侧边栏添加断点即可进行调试。

当有程序运行到我们的断点处时，就可以进行调试了：

在这里，我们可以使用快捷键进行操作，常用的快捷键如下：

F9：添加/移除 断点

F10：逐过程，即跳过该语句中的方法、表达式等

F11：逐语句调试，即单步调试，会跳入方法、表达式，进行逐语句的跟踪调试

在执行过程中，如果我们要执行即时的代码，我们就需要在右侧的窗格中输入代码，按回车即可：

如果要执行多行代码，点击运行按钮右侧的双箭头，就会打开多行模式。我就不再截图片了。

这种直接在浏览器中调试的方法同样适用于Google浏览器Chrome和FireFox FireDebug，只不过在细枝末叶上面有些不同罢了，主体的功能都是一样的。

按F12键进入开发者工具，可以查看源代码、样式和js：

点击Scripts按钮，可以打开这个调试窗口，里面包含了网页中脚本文件源码，点击左侧的按钮可以打开选择文件的侧窗口。

2、使用debugger关键字进行调试

这种方法很简单，我们只需要在进行调试的地方加入debugger关键字，然后当浏览器运行到这个关键字的时候，就会中断：

设置以后就可以使用debugger关键字进行调试了；进过这样的设置，我们还可以捕获到意外的错误，进行跟踪调试。

有哪些 JS 调试技巧？

其实当你经验足够的时候，有些错误不需要调试就能想明白。当然，新手而言，从调试做起。

主要的技巧取决于你使用的调试工具，这里以我使用的chrome为例。首先跳出chrome的调试工具，右键选择检查。。

接着弹出开发者窗口，如图

这个就是调试页面了，然后单击顶头的source，找到你的js脚本，如图：

图片中那个蓝色的小框框就是断点了，设置方法就是单击那里。

可以见到，窗口下面红色鲜红的值就是错误了，单击后面的错误位置就能定位了(语法错误能显示定位，但是逻辑错误无法定位。内置api出错定位会出错，比如JSON.parse()出错就定位到html文件去了)

左下角有一个蓝色小箭头，后面是能输入的，输入一下试试，

我输入了cookie，就返回了cookie的值。其他的同理。

另外也可以在js脚本里面使用console.log()，在console一栏会显示的。更多的方法，尝试才知道。

chrome 如何调试js

是可以调试js的。

使用的工具：谷歌浏览器、测试的网站；

可以按照下面的方法进行调试：

1、f12 打开开发者工具，控制台介绍：

Elements：页面元素，可以进行编辑，保存后实时查看页面效果；

Network： 查看js模拟的http请求，例如下图中修改购物车中商品数量，可以实时的看到请求地址，直接上图。

2、点击请求地址，会把请求的头信息和响应信息等数据展示出来，此处非常便捷，展示样式比firebug更直观，直接上图，可以点击查看头信息，preview，响应信息，cookie，timeline对我们有用的。注意，preview是此处模拟http请求的发送数据，直接预览出来了。

3、Sources：次功能是js页面调试中最突出的功能，上图。

功能介绍：左侧sources目录可以展开，查看加载本页面所调用的资源，如js，css，php。此处先介绍断点调试，可以顺序的看到程序的执行过车，勾选右侧的Any XHR 按钮，上图。

4、一步一步执行，如添加数量的时候，可以看到右侧的call stock进程，可以看到此处出发了js中changePrice()函数，在此处我们可以进行逻辑分析了。或则在代码行处单击设置断点，英文选项是add breakpoints，单击右击都可以，最是好用，上图。

5、可以查看你设置的所有断点，右侧展开，如图，断点调试用的比较多，当然了还可以在js里直接写代码，查看实时数据变化，查看要注意ctrl+s 保存操作。

6、Timeline：次功能是查看页面性能，页面渲染速度的，一般是用不到的。测试人员可以查看，图中展示一些性能参数供参考，上图。

Profile：次功能主要测试加载文件速度参考，可以在此处上传我们的文件供测试用。点击 Load上传即可，一般用不着。

备注：Console：此功能是模拟js控制台，直接写代码，查看结果。高级功能使用时开启断点，查看变量的变化过程。还可以条用函数。

如何进行html调试和js脚本调试

工具/原料

chrome浏览器   Mozilla firefox   电脑

方法/步骤

1、以chrome为例，首先打开需要调试的页面，按F12快捷键打开调试工具。

2、选择指定的dom节点进行查看和编辑。

3、js断点调试：chrome非常强大，在chrome调试工具栏中，你可以进行js断点调试以及格式化查看（一些大型的门户网站都会将js压缩成无任何格式的代码这在研究时特别费劲）：我先写一段简单的js代码：function debug(){for (var i=0;i10;i++){alert(i);}调试截图如下：

4、js ajax调试，ajax技术如今越来越频繁使用，所以，ajax调试也必不可少：在chrome调试工具中，可以查看到当前页面所以的请求，包括ajax请求，以下是页面打开后所有发起的请求。

有哪些 JS 调试技巧

代码格式化

可以将被压缩的代码自动展开

实时代码编辑

可以在运行时动态改变 JS 代码，并且不需要刷新页面就可以看到效果，一般用这个实时的在代码里插 console.log

DOM 事件/XHR 断点

可以针对 DOM 结构改变/属性改变/键盘鼠标事件 等下断点，直接断到事件的第一个 listener 函数上。还可以对 XHR 请求下断点，断到发起请求的那一行代码上

调用栈分析

这个非常常用，Scripts 面板下右上角的那一部分

自动异常断点

当代码执行出错时，可以自动断到出错的代码行上，直接分析出错时的运行时环境

分析 HTTP 请求

Network 面板下列出了所有的 HTTP 请求，可以很方便的查看请求内容、HTTP 头、请求时间等信息

以线上代码出 Bug 为例。一般上手第一步是使用代码格式化功能将被压缩的线上代码展开，然后开启自动异常断点，尝试重现 Bug。当 Bug 出现时代码会自动断到出错的那一行。然后通过调用栈分析结合控制台找

到最开始出错的那个函数上。一般的 Bug 到这里就算找出来了，但是如果这个 Bug 是在事件回调函数或者 XHR 回调函数上，就得结合 DOM

事件断点和 XHR 断点 进一步往上找哪个函数出错。另外，如果是发给服务器请求没有得到正确的 response，可以通过 Network

面板查看请求的参数、Cookie、HTTP 头是否有误。

另外，还可以通过 Charles/Nginx/Fiddler 等工具将远程 js 代码映射到自己的电脑上，免去了代码格式化的麻烦，还可以直接编辑。

还有些比较小的 Tips:

console.group/console.groupEnd 可以将 log 信息分组展示，看起来更舒服

console.warn/console.error 可以输出 warning 和 error log

element 面板右侧实时编辑的 css 样式，可以在 resource 面板里保存起来

关于样式还有个技巧，Elements 面板右上角的 styles 栏，右侧有三个图标，功能依次是：根据当前元素创建一个 css 样式、模拟 :hover/:active 等伪类、颜色值类型选择。实用

resource 面板可以删除和修改 cookie/localstorage

scripts 面板下的 ctrl+o 可以快速跳转脚本文件，ctrl+shift+o 快速跳转函数

右下角的齿轮图标里有个选项是开发者工具和网页左右分屏（Dock to the right，默认是上下分屏），宽屏必备

接上，还有个选项是禁用 Cookit，必点

接上，在选项面板里还可以手工编辑 user agent 和模拟触摸事件

最后说说 IE 6 的调试，我是这么个流程：

首先尝试在 Chrome 下重现该 Bug，如果能重现，就先把 Chrome 里能重现的 Bug 修了。确定 Chrome 里 OK，但是 IE 6 有问题，再继续下一步

到

IE 里首先尝试高版本 IE，比如 IE 9。E 9 的开发者工具还不错，也可以下断点，调用栈分析、控制台样样都有。如果 IE 9

里没问题，那就继续尝试 IE8，一直定位到能重现该问题的最高版本的 IE 上。即使是 IE

7，其开发者工具也还是勉强能用的……如果不幸的碰上一个 IE 6 only 的 Bug，那就只有继续下一步

到这一步的话一般就是

最苦逼的时刻。IE 6 实在是没有太好用的 JS 调试工具（据说 Visual Studio

可以调，我没用过，欢迎补充）。这时候一般就是二分+alert的土法定位到出错行，加上耐心和时间，还有一点点运气。这一步的话强烈推荐开

Fiddler。