调试已编译好的js

Ⅰ 有哪些 JS 调试技巧

一般js调试用firedebug或者Chrome Developer Tool，我大概是从 08、09 年从 Firebug 转入 Chrome Developer Tool，一直用到现在，越用越喜欢。我平时调错时常用的功能有：
1、代码格式化
可以将被压缩的代码自动展开
2、实时代码编辑
可以在运行时动态改变 JS 代码，并且不需要刷新页面就可以看到效果，一般用这个实时的在代码里插 console.log
3、DOM 事件/XHR 断点
可以针对 DOM 结构改变/属性改变/键盘鼠标事件 等下断点，直接断到事件的第一个 listener 函数上。还可以对 XHR 请求下断点，断到发起请求的那一行代码上
4、调用栈分析
这个非常常用，Scripts 面板下右上角的那一部分
5、自动异常断点
当代码执行出错时，可以自动断到出错的代码行上，直接分析出错时的运行时环境
分析 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。

Ⅱ 如何使用IE浏览器自带开发人员工具调试JS程序

1、在工具->Internet选项->高级，去掉“禁用脚步调试（Internet Explorer）”项的勾选。
2、去掉“显示友好http错误信息”项的勾选。最后点击应用，确定按钮。
3、预览表单，当要执行的js程序出现错误时，浏览器会给出提示。
4、在给出的错误提示窗口中，选择“是（Y）”按钮，进入IE浏览器自带的开发人员工具脚本调试界面。
5、根据JS调试信息可以知道，当前JS报错是由于没有找到指定对象“dat”而导致的。需要在表单设计器中，修改JS程序并保存。因演示效果的需要，在本例中是没有设置id值为dat的单行输入框控件的，本例中第二个单行输入框控件的id值是data2。
6、将其改成值data2后，再进行测试不会出现JS报错信息，程序得以正常执行。

Ⅲ 有哪些 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。

Ⅳ chrome 如何调试js

是可以调试js的。

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

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

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

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

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

备注：Console：此功能是模拟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关键字进行调试了；进过这样的设置，我们还可以捕获到意外的错误，进行跟踪调试。

Ⅵ 如何调试JS

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

Ⅶ 怎么在浏览器中调试JS代码

在浏览器中调试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控制台”

• FireFox和chrome的调试方法是一样的，只是浏览器的调试窗口和按钮位置有少许区别，请参照chrome浏览器的调试方法就可以。下面是FireFox的调试窗口截图。

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

工具/原料

chrome浏览器 Mozilla firefox 电脑

方法/步骤

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

Ⅸ 如何调试html网页中的js代码

以谷歌浏览器Chrome为例（火狐类似），说下前端打“断点”：

一、按F12快捷键打开Chrome控制台，点击“Sources”选项卡，如图：

二、刷新当前网页，代码执行到“断点”处会停住，如上图蓝色区域；

三、按F8快捷键可以在不同的断点之间切换、按F10快捷键程序代码会一步步执行，这样就能很方便定位到错误区域，排查错误。

说明：火狐浏览器的操作方法和谷歌类似，当然界面略有不同。

Ⅹ 谷歌浏览器怎么调试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新增的，记得兼容其他浏览器的支持情况哦）