本文目录
- chrome 如何调试js
- 如何调试JS
- 怎么在浏览器中调试JS代码
- 如何进行html调试和js脚本调试
- 如何在网页中调试JavaScript
- JS怎么进行单步调试
- 用什么工具可以调试js
- JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
- 如何调试Javascript代码
- 如何使用firefox进行网页js调试
chrome 如何调试js
是可以调试js的。
使用的工具：谷歌浏览器、测试的网站；
可以按照下面的方法进行调试：
1、f12 打开开发者工具，控制台介绍：
Elements：页面元素，可以进行编辑，保存后实时查看页面效果；
Network： 查看js模拟的
如何调试JS
目前，常用的浏览器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关键字进行调试了；进过这样的设置，我们还可以捕获到意外的错误，进行跟踪调试。
-chrome
怎么在浏览器中调试JS代码
Chrome浏览器
按F12或是“设置“--》“工具”--》“开发者工具”，即可打开chrome的调试工具。
关于这个工具的用法，请参考“怎么使用chrome调试工具”。这里主要讲怎么使用source这个选项来调试JS代码。下图source选项的窗口。
0怎么使用chrome调试工具
下图中1为source选项卡，2是在小窗口中选中source选项，3是当前页面的原代码，这个需要自己确定，一般会是index或是比较具体的jsp的名称。双击3中的页面，右边的窗口中会出现页面的原代码，如下图4.
点击5，会格式化代码，是代码有合理换行，比较清晰。
下面就是具体的调试了。
在下图1中，先通过元素定位找到一个按钮，查看原代码，找到它点击后的JS方法，然后在source窗口查询，如图2中的1，定位到该方法，在方法的第一行代码的左边，单击，窗口上会出现3这样的箭头，表示断点设置在这里。4是一些控制，包括继续执行，暂停执行，跳入，跳出等。5显示的是当前所有的断点的信息。
在页面上点击按钮，页面会进入下图所示的状态，表示进入JS方法中的断点了。代码执行会停在断点处。1上面的继续按钮，可以是JS方法继续执行，也可以使用3上面的继续按钮。代码停在2中的代码行，这时可以将鼠标悬停在变量上来查看变量值，也可以在console中打印输出。点击3上的执行下一行可以执行下一行，也可以跳入某个方法或是跳出。点击继续，代码会跳到下一个断点或是完成调试。
FireFox浏览器。
按F12或是“设置”--》“开发者“--》“Web控制台”
7
FireFox和chrome的调试方法是一样的，只是浏览器的调试窗口和按钮位置有少许区别，请参照chrome浏览器的调试方法就可以。下面是FireFox的调试窗口截图。
-c
如何进行html调试和js脚本调试
工具/原料
chrome浏览器 Mozilla firefox 电脑
方法/步骤
1、以chrome为例，首先打开需要调试的页面，按F12快捷键打开调试工具。
2、选择指定的dom节点进行查看和编辑。
3、js断点调试：chrome非常强大，在chrome调试工具栏中，你可以进行js断点调试以及格式化查看（一些大型的门户网站都会将js压缩成无任何格式的代码这在研究时特别费劲）：我先写一段简单的js代码：function debug(){for (var i=0;i《10;i++){alert(i);}调试截图如下：-chrome
4、js ajax调试，ajax技术如今越来越频繁使用，所以，ajax调试也必不可少：在chrome调试工具中，可以查看到当前页面所以的请求，包括ajax请求，以下是页面打开后所有发起的请求。
如何在网页中调试JavaScript
以IE8浏览器为例，接下来重点介绍并演示如何使用浏览器自带的开发人员工具调试JS程序。（该工具快捷按钮为F12）
1、在工具-》Internet选项-》高级，去掉“禁用脚步调试（Internet Explorer）”项的勾选。
2、去掉“显示友好
-c
JS怎么进行单步调试
1、打开firebug,点击“脚本”选项。
2、点击“所有”选项，这里可以选择要显示的脚本，建议选择“显示所有脚本”。
3、在“所有选项”的旁边，是当前显示的JavaScript文件的名字，点击它，可以看到当前页面用到的所有JavaScript文件，在列表里找或者直接在列表的搜索框搜索你要调试的JavaScript文件。-chrome
4、在脚本正文行号的左边点击，可以在此行设置断点，程序运行到此行就会暂停。
5、此时红点上会有个黄色箭头，代表此行即将被执行。右边的监控栏可以输入你想监控的表达式，查看它的值。
6、脚本正文右上角有四个图标，第一个图标表示取消此次调试，但如果下次程序执行到此断点还是会暂停；第二个图标表示单步进入程序；第三个图标表示单步跳过程序；第四个图标表示单步退出。
注意事项
调试完脚本后，记得清除断点，在红点位置点击一下就行了。
用什么工具可以调试js
如图，当然是浏览器的开发者工具呀（firefox chrome使用f12快捷键打开）
不过j除了控制台最好能写在一个html文件里，那样容易调试，不过浏览器调试后的代码是不保存的，要自己复制粘贴回去
至少像这样
《script》
alert(“hello“)
《/script
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
浏览器开发者工具
我个人最喜欢Chrome开发者工具。虽然Safari和Firefox无法达到Chrome那么高的标准，但它们也在逐渐改善。在Firefox中，可以将Firebug和Firefox开发者工具组合使用。如果Firefox小组在改进内置开发者工具方面继续表现优异的话，Firebug有一天可能会被淘汰。-c
先把个人偏好放在一边，你应该能够在目标浏览器中对任意代码进行试验和调试。你的目标浏览器可能包括著名的IE8，也可能不包括。
要熟悉你自己选择的开发者工具。你还可以从IDE（集成开发环境）或者第三方软件获得额外的调试支持。-chrome
在各种调试工具中，调试的基础知识是相通的。事实上，我是在90年代从Borland的C开发者环境中学习的调试基础。断点、条件断点、监视与最新版Chrome开发者工具是完全相同的。2000年左右，我在Java中捕获到第一例异常。堆栈跟踪（Stack traces）的概念依然适用，即使JavaScript术语将其称作错误（Error），检查堆栈跟踪仍然和以前一样有用。-c
有些知识点是前端开发特有的。例如：
DOM检查
DOM断点
调试事件
内存泄露分析
断点
使用debugger语句可以在源代码中增加断点。一旦到达debugger语句，执行中断。当前作用域的上下文出现在控制台中，还有所有的局部变量和全局变量。将鼠标光标移到变量上可以查看变量的值。
在代码中还可以创建条件断点：
JavaScript
if (condition) { debugger;}
还可以根据自己需要在开发者工具中插入断点和条件断点。在Chrome开发者工具中，在Sources视图中点击行号即可增加断点。如果在断点上点击右键并选择“编辑断点（Edit Breakpoint）”，你还可以增加断点条件。-chrome
节点变化的断点
如果你的任务是调试垃圾代码，你可能会有这样的问题：为什么DOM节点在执行过程中发生了改变。Chrome开发者工具提供了一种方便的断点，可用来检测元素树中的节点变化。
在Elements视图中，右键点击一个元素，从右键菜单中选择“Break on…”。
节点变化的断点
DOM断点的类型可能包括：
选定节点树状子目录（sub-tree）中的节点变化，
选定节点的属性发生变化，
节点被删除。
避免记录引用类型
当记录对象或数组时，原始类型的值在引用对象记录中可能会发生变化。当查看引用类型时一定要记住，在记录和查看期间，代码执行可能会影响观测到的结果。
例如，在Chrome开发者工具中执行以下代码：
JavaScript
var wallets = [{ amount: 0 }];setInterval( function() { console.log( wallets, wallets, wallets.amount ); wallets.amount += 100;}, 1000 );-c
记录的第二个和第三个属性的值是正确的，第一个属性中对象引用的值是不可靠的。当你第一次在开发者工具中显示这个属性时，amount域的值就已经确定了。无论你对同一个引用关闭并重新打开多少次，这个值都不会变化。-chrome
记录参考类型
永远记得你在记录什么。记录原始类型时，使用带断点的watch表达式。如果是异步代码，避免记录引用类型。
表格记录
在一些开发者工具中，你可以用console.table在控制台中记录对象数组。
尝试在你的Chrome开发者工具中执行下列代码：
JavaScript
console.table( [ { id: 1, name: ’John’, address: ’Bay street 1’ }, { id: 2, name: ’Jack’, address: ’Valley road 2.’ }, { id: 3, name: ’Jim’, address: ’Hill street 3.’ } ] );-c
输出是非常好看的表格。所有原始类型都立刻显示出来，它们的值反应记录时的状态。也可以记录复杂类型，显示内容为其类型，内容无法显示。因此，console.table只能用来显示具有原始类型值的对象构成的二维数据结构。-chrome
XHR断点
有时你可能会遇到错误的AJAX请求。如果你无法立刻确认提交请求的代码，XHR断点可以帮你节省时间。当提交某一特殊类型的AJAX时，XHR断点将会终止代码的执行，并将提交请求的代码段呈现给用户。
在Chrome开发者工具的Sources标签页中，其中一个断点类型就是XHR断点。点击+图标，你可以输入URL片段，当AJAX请求的URL中出现这个URL片段时，JavaScript代码将会中断。
事件监听器断点
Chrome开发者工具可以捕获所有类型的事件，当用户按下一个键、点击一下鼠标时，可以对触发的事件进行调试。
异常时暂停
Chrome开发者工具可以在抛出异常时暂停执行JavaScript代码。这可以让你在Error对象被创建时观察应用的状态。
异常时暂停
代码片段
Sources标签页左侧面板上有一个代码片段（Snippet）子标签页，可用于保存代码片段，帮你调试代码。
如果你坚持使用控制台调试，反复写相同的代码，你应该将你的代码抽象成调试片段。这样的话，甚至还可以把你的调试技巧教给你的同事。
Paul Irish发布过一些基本的调试代码片段，例如在函数执行前插入断点。审查这些代码片段，并在网上搜索其他代码片段，这是很有价值的。
在函数执行前插入断点
如果你可以得到函数调用的源代码，你还可以在函数调用前插入断点来终止函数的执行。如果你想调试f函数，用debug(f)语句可以增加这种断点。
Unminify最小化代码
（译者注：unminify 解压缩并进行反混淆）
尽可能使用 source map。有时生产代码不能使用source map，但不管怎样，你都 不应该直接对生产代码进行调试。
（译者注：sourcemap 是针对压缩合并后的web代码进行调试的工具）
如果没有source map的话，你最后还可以求助于Chrome开发者工具Sources标签页中的格式化按钮（Pretty Print Button）。格式化按钮{}位于源代码文本区域的下方。格式化按钮对源代码进行美化，并改变行号，这使得调试代码更加方便，堆栈跟踪更加有效。-c
格式化按钮只有在不得已时才会使用。从某种意义上来说，丑代码就是难看，因为代码中的命名没有明确的语义。
DOM元素的控制台书签
Chrome开发者工具和Firebug都提供了书签功能，用于显示你在元素标签页（Chrome）或HTML标签页（Firebug）中最后点击的DOM元素。如果你依次选择了A元素、B元素和C元素，
$0 表示C元素
$1 表示B元素
$2 表示A元素
如果你又选择了元素D，那么$0、$1、$2和$3分别代表D、C、B和A。
访问调用栈
JavaScript
var f = function() { g(); } var g = function() { h(); }var h = function() { console.trace(’trace in h’); }f();-chrome
Chrome开发者工具中的Sources标签页也在Watch表达式下面显示调用栈。
性能审查
性能审查工具通常是很有用的。这些工具可以用于防止内存泄露，还可以检测到你的网站哪里需要优化。由于这些工具并不了解你的产品，你可以忽略其某些建议。通常来说，性能分析工具能够有效范围，可以使你的网站显著优化。-c
审查工具举例：
Chrome开发者工具的Audit标签页
YSlow
熟能生巧
你可能熟悉某些调试技巧，其他技巧也会帮你节省不少时间。如果你开始在实践中使用这些技巧，我建议你几周之后重新阅读本文。你将会惊奇地发现，你的关注点在几周内就发生了变化。
五个常用的js调试工具
JavaScript被称作以原型(prototype)为基础的语言。这种语言有很多特色，比如动态和弱类型，它还有一等函数（first class function）。另一个特点是它是一个多范型(multi-paradigm)语言，支持面向对象、声明式、函数式的编程风格。-chrome
JavaScript最初被用作客户端语言，浏览器实现它用来提供增强的用户接口。JavaScript在很多现代的网站和Web应用程序中都有应用。JavaScript的一个很棒的功能也很重要，就是我确实可以用它来提高或改善网站的用户体验。JavaScript也可以提供丰富的功能和交互的组件。-c
JavaScript在这技术高速发展的同时变得非常受欢迎。因为受欢迎JavaScript也改进了许多，修改JavaScript脚本有很多事要做。这次我们为开发者带来了几个非常有用的JavaScript调试工具。-chrome
1）Drosera
可以调试任何WebKit程序，不仅仅是Safari浏览器。
2)Dragonfly
源代码视图有语法高亮，可以设置断点。强大的搜索功能，支持正则表达式。
3）Getfirebug
可以在任何网页编辑、调试和实时监视CSS、HTML和JavaScript。
4)Debugbar
5)Venkman
Venkman是Mozilla的JavaScript调试器名称。它旨在为以Mozilla为基础的浏览器（Firefox, Netscape 7.x/9.x and SeaMonkey）提供一个强大的JavaScript调试环境。-c
如何调试Javascript代码
初级调试，也就是用alert来调试。
比如弹出一个变量值，看看这个变量值是不是预想中滴结果，当然用alert调试起来有很大的限制，现在已经用的不多了，而且用户还可以重写alert事件，如果把alert屏蔽掉了，那么就彻底无用了，当然有时候也还是挺管用的。
中级调试，也就是用调试工具调试。
一般来说，现在的浏览器都自带了JS调试工具，如IE8-IE11，Chrome，火狐（最好装上Debug），Safari等，按F12呼出调试界面。
以下用Chrome来说，按F12，选择选项卡的Source选项，接着点击右上角的三角形，选择你要调试的JS文件（如test.js），然后在你需要调试的代码段前面单击鼠标左键就添加了一个断点，这个时候当代码运行到这个地方的时候就会停止下来了，把鼠标移动对应的变量上面去就能显示出该变量的值什么的，还可以在变量上面单击右键添加监视等。
-chrome
如何使用firefox进行网页js调试
1、首先使用Firefox火狐浏览器打开需要调试页面，也可以在开发工具设置火狐浏览器来打开：
2、在打开的Firefox浏览器中按F12键，接着就会打开“开发者工具”了：
3、此时选择“调试器”选项，然后选择需要调试的JS文件，接着就可以在需要调试的位置加入断点进行调试：
4、按F11或者F10单步调试JS，这里F11和F10的区别是F11调试，单步执行进入调用的其它函数；而F10调试单步执行，是不进入调用的其它函数的。当然也可以单机页面上相应的按钮进行调试。以上就是用Firefox调试网页的过程：-c
