你正在使用的浏览器版本过低，将不能正常浏览和使用知乎。谷歌浏览器怎么调试js
谷歌浏览器调试javascript教程
时间： 9:55:43来源：作者：cz(0)
谷歌浏览器是一款由谷歌公司开发的浏览器。谷歌浏览器是一款基于其他开源软件所撰写的。下面小编为大家分享一篇谷歌浏览器调试javascript的教程，希望帮助大家首先我们打开开发者工具，你可以直接在页面上点击右键，然后选择审查元素或者在Chrome的工具中找到或者你直接记住这个快捷方式： Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台)，或者直接按F12。打开的开发者工具就长下面的样子，建议大家将开发者工具弹出作为一个独立的窗口：1、Elements标签页这个就是查看、编辑页面上的元素，包括HTML和CSS：左侧就是对页面HTML结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性，或者你点右键选;Edit as H直接对元素的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的原因。在IE中调试Javascript - 起飞网
不管我们写代码的时候如何小心，都不可能完全避免程序中出现bug，这个时侯就需要我们在调试的时候找出错误，修改代码。 Javascript是一门灵活的语言，灵活的语法和它解释执行的特性，使得Javascript中的错误更加难以被察觉，当我们在运行是发现错误后，就要在浏览器中对Javascript进行调试了，目前市场上用户数量最大的浏览器IE自然也具备了调试Javascript的功能，让我们来看看吧！ IE 开发人员工具 IE 浏览器是我们Javascript程序的宿主，负责解释并执行Javascript代码。 新版本的IE 浏览器已经集成了开发人员工具，你可以在工具菜单中找到。IE9 及以上版本，如下图：
另外，还可以使用快捷键 F12 打开开发人员工具。打开后的工具窗口如下图：
这个工具窗口是附加在IE窗口中的，你可以通过右侧的三个按钮来最小化、打开独立窗口或关闭它。 这里需要特别说明一下，在IE6中是没有这个工具的，你需要单独的下载IE Developer Toolbar，然后才能使用；以后的版本都已经集成了，如果需要调试代码，按一下F12唤出调试窗口吧。 调试Javascript代码 为了演示Javascript的调试功能，我做了一个这样的页面，代码很简单：&!DOCTYPE html&
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8"/&
&title&调试页面&/title&
&script type="text/javascript"&
function btn_click() {
var a = 1;
var b = "2";
var c = a +
&input type="button" value="确定" onclick="btn_click()" /&
当我们点击页面中的“确定”按钮的时候，执行btn_click()方法。这个时侯，页面弹出c的值：
我们希望得到的值是3，但这里弹出的是12，很显然这不是我们想要的结果（看出错误在哪里了吗？b定义的值是字符串"2"，在和a相加的时候，a被默认转换为字符串类型了，a+b就成了两个字符串相加，结果当然是"12"）。
假设我们不知道原因，现在就需要对这一小段代码进行调试了。按下F12键，打开开发人员工具，点击“脚本”选项卡：
我们在btn_click()方法中加入断点，怎么加呢？可以用鼠标点击某一行代码的开头位置加入断点，也可以将光标放到某一行，按下F9添加断点。
加入断点之后，点击“启动调试”按钮，这个时候开发人员工具窗口会脱离IE，打开一个对的调试窗口，并进入调试模式：
我们点击一下“确定”按钮，这个时侯开发人员工具就能捕获到断点了：
我们打了断点的这一行变成了黄色，说明代码整运行到这一行，如果要执行本行代码，按F10或F11：
我们按下F10以后，代码执行到下一行，这个时侯，a已经被定义和赋值，我们可以查看一下a的值：将鼠标放在变量a上面，就会看到a当前的值：
这只是临时查看的办法，如果要监视变量值的变化，总是挪动鼠标可不方便，我们可以选中变量 a ，在变量 a 上面点击鼠标右键，选择“添加监视”,如下图：
这个时侯右侧的监视窗口中就已经添加了对变量 a 的监视：
监视表格中列出了标量的名称、值和类型。
除了这种添加监视的方法之外，我们还可以直接在监视表格的下面，有一个行“单击以添加...”的文字，我们点击以后可以添加我们任何想要监视的对象。如果我们要监视document对象，在里面输入document，然后按回车键：
这样就添加了对document对象的监视，由于这个对象包含了很多的属性和方法，所以前面有一个加号图标，点击这个图标，可以展开document的属性和方法，方便我们对对象的监视。
在这里，我们可以使用快捷键进行操作，常用的快捷键如下：
F9：添加/移除 断点
F10：逐过程，即跳过该语句中的方法、表达式等
F11：逐语句调试，即单步调试，会跳入方法、表达式，进行逐语句的跟踪调试
执行Javascript语句
在调试的过程中，我们是不能够编辑Javascript代码的，如果我们需要即时运行某一句Javascript代码，我们可以在控制台中输入代码，并执行：
我们执行a = 2; 这行语句，然后转到监视窗口中，这个时侯 a 的值已经变成 2 了：
另外一种改变变量值的方法是在监视窗口值直接编辑：双击 a 变量的值对应的单元格可以对它进行编辑：
如果要结束调试，点击“停止调试”按钮就可以了。
本篇内容介绍了如何在IE中调试Javascript代码，在后续的内容中，我还将介绍如何在Visual Studio 中调试Javascript，以及如何在Chrome中调试Javascript，敬请关注！js常用工具
一、常用JS 调试技巧代码格式化
可以将被压缩的代码自动展开实时代码编辑
可以在运行时动态改变 JS 代码，并且不需要刷新页面就可以看到效果，一般用这个实时的在代码里插 console.logDOM 事件/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 logelement 面板右侧实时编辑的 css 样式，可以在 resource 面板里保存起来关于样式还有个技巧，Elements 面板右上角的 styles 栏，右侧有三个图标，功能依次是：根据当前元素创建一个 css 样式、模拟 :hover/:active 等伪类、颜色值类型选择。实用resource 面板可以删除和修改 cookie/localstoragescripts 面板下的 ctrl+o 可以快速跳转脚本文件，ctrl+shift+o 快速跳转函数右下角的齿轮图标里有个选项是开发者工具和网页左右分屏（Dock to the right，默认是上下分屏），宽屏必备接上，还有个选项是禁用 Cookit，必点接上，在选项面板里还可以手工编辑 user agent 和模拟触摸事件二、JS调试必备的5个debug技巧1.我以前也说过，你可以在JavaScript代码中加入一句来手工造成一个断点效果。需要带有条件的断点吗？你只需要用if语句包围它：代码如下:if (somethingHappens) {&}但要记住在程序发布前删掉它们。2. 设置在DOM node发生变化时触发断点有时候你会发现DOM不受你的控制，自己会发生一些奇怪的变化，让你很难找出问题的根源。谷歌浏览器的开发工具里有一个超级好用的功能，专门可以对付这种情况，叫做“Break on…”，你在DOM节点上右键，就能看到这个菜单项。断点的触发条件可以设置成这个节点被删除、节点的属性有任何变化，或它的某个子节点有变化发生。3. Ajax 断点XHR断点，或Ajax断点，就像它们的名字一样，可以让我们设置一个断点，在特点的Ajax调用发生时触发它们。当你在调试Web应用的网络传输时，这一招非常的有效。4. 移动设备模拟环境谷歌浏览器里有一些非常有趣的模拟移动设备的工具，帮助我们调试程序在移动设备里的运行情况。找到它的方法是：按F12，调出开发者工具，然后按ESC键(当前tab不能是Console)，你就会看到第二层调试窗口出现，里面的Emulation标签页里有各种模拟设备可选。当然，这不会就变成了真正的iPhone，只是模拟了iPhone的尺寸，触摸事件和浏览器User Agent值。5. 使用Audits改进你的网站YSlow是一个非常棒的工具。谷歌浏览器的开发者工具里也有一个非常类似的工具，叫Audits。它可快速的审计你的网站，给你提出非常实际有效的优化你的网站的建议和方法。
微信号：w3cschoolcn
意见反馈：
联系方式：