调试js 如何断点调试javascript
大家好，今天来为大家解答调试js这个问题的一些问题点，包括如何断点调试javascript也一样很多人还不知道，因此呢，今天就来为大家分析分析，现在让我们一起来看看吧！如果解决了您的问题，还望您关注下本站哦，谢谢~
JS怎么进行单步调试
1、打开firebug,点击“脚本”选项。
2、点击“所有”选项，这里可以选择要显示的脚本，建议选择“显示所有脚本”。
3、在“所有选项”的旁边，是当前显示的JavaScript文件的名字，点击它，可以看到当前页面用到的所有JavaScript文件，在列表里找或者直接在列表的搜索框搜索你要调试的JavaScript文件。
4、在脚本正文行号的左边点击，可以在此行设置断点，程序运行到此行就会暂停。
5、此时红点上会有个黄色箭头，代表此行即将被执行。右边的监控栏可以输入你想监控的表达式，查看它的值。
6、脚本正文右上角有四个图标，第一个图标表示取消此次调试，但如果下次程序执行到此断点还是会暂停；第二个图标表示单步进入程序；第三个图标表示单步跳过程序；第四个图标表示单步退出。
注意事项
调试完脚本后，记得清除断点，在红点位置点击一下就行了。
谷歌浏览器哪个版本调试js好用
首先我们打开开发者工具，你可以直接在页面上点击右键，然后选择审查元素或者在Chrome的工具中找到或者你直接记住这个快捷方式： Ctrl+Shift+I(或者Ctrl+Shift+J直接打开控制台)，或者直接按F12。打开的开发者工具就长下面的样子，建议大家将开发者工具弹出作为一个独立的窗口： 1、Elements标签页这个就是查看、编辑页面上的元素，包括HTML和CSS：左侧就是对页面HTML结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性，或者你点右键选;Edit as Html;直接对元素的HTML进行编辑，或者删除某个元素，所有的修改都会即时在页面上得到呈现。(注：看到上面右键菜单的最后一个选项;审查元素了么?这是不是说明这个开发者工具的页面也是HTML来的呢?你点一下就知道了哦，嘿嘿)你还可以对某个元素进行监听，在JS对元素的属性或者HTML进行修改的时候，直接触发断点，跳转到对改元素进行修改的JS代码处： Elements标签页的右侧可以对元素的CSS进行查看与编辑修改：你还可以通过这里看到各CSS选择器设置的CSS值的覆盖情况。下面的Metrics可以看到元素占的空间情况(宽、高、Padding、Margin)注意到上面的Properties没有?这个很有用哦，可以让你看到元素具有的方法与属性，比查API手册要方便得多哦(要注意某些方法和属性在IE、FireFox等其他浏览器下面的支持情况哦)。 2、Resources标签页 Resources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容，同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等，你可以对存储的内容编辑和删除。这里的CSS文件有一个好玩的特性，你可以直接修改CSS文件，并且修改即时生效哦： 3、Network标签页 Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用，特别是在查看Ajax类请求的时候，非常有帮助。注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示的哦。点击左侧某一个具体去请求URL，可以看到该请求的详细HTTP请求情况：我们可以在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息，对于开发、调试，都是很有用的。 4、Scripts标签页很明显，这个标签页就是查看JS文件、调试JS代码的，直接看下图的说明：还有你可以打开Javascript控制台，做一些其他的查看或者修改：你甚至还可以为某一XHR请求或者某一事件设置断点： 5、Timeline标签页注意这个Timeline的标签页不是指网络请求的时间响应情况哦(这个在Network标签页里查看)，这个Timeline指的JS执行时间、页面元素渲染时间：点击底部的Record就可以开始录制页面上执行的内容。 6、Profiles标签页这个主要是做性能优化的，包括查看CPU执行时间与内存占用： 7、Audits标签页这个对于优化前端页面、加速网页加载速度很有用哦(相当与Yslow)：点击run按钮，就可以开始分析页面，分析完了就可以看到分析结果了它甚至可以分析出页面上样式表中有哪些CSS是没有被使用的哦： 8、Console标签页就是Javascript控制台了：这个除了查看错误信息、打印调试信息(console.log())、写一些测试脚本以外，还可以当作Javascript API查看用。例如我想查看console都有哪些方法和属性，我可以直接在Console中输入;并执行：怎么样，一目了然了吧?再例如我想查看日期函数都有哪些方法：(注：注意在这里看到的某些方法和属性是ES5新增的，记得兼容其他浏览器的支持情况哦) Google Chrome除了简洁、快速，现在的Chrome的插件也非常的丰富了。而对于web开发者来说，Chrome对于HTML5、CSS3等一些新标准的支持也是比较完善的，而且Chrome的开发者工具我个人认为真的非常好用，这就是为什么我向web开发者推荐使用Chrome的原因。
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控制台，直接写代码，查看结果。高级功能使用时开启断点，查看变量的变化过程。还可以条用函数。
如何断点调试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关键字进行调试了；进过这样的设置，我们还可以捕获到意外的错误，进行跟踪调试。
END，本文到此结束，如果可以帮助到大家，还望关注本站哦！