谷歌浏览器Chrome developer tool详细介绍
http://www.cr173.com/html/19114_4.html
第 4 页 js调试源码控制面板
5 源码控制面板（js调试）
Javascript的调试，基本上是通过源码控制面板和命令行配合进行的。
5.1 Beautiful javascript
网上的js一般是压缩过的，阅读压缩过的javascript肯定是不是人能进行的，更别说添加断点了。在 Scripts 面板下面有个 Pretty print 按钮(这种符号 {}), 点击会将压缩 js 文件格式化缩进规整的文件, 这时候在设定断点可读性就大大提高了。
调整前
调整后
5.2 代码出错定位
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 3 <htmlxmlns="http://www.w3.org/1999/xhtml"> 4 5 <head> 6 7 <title>javascript add</title>8 9 <script type="text/javascript">10 11 var div=document.getElementByd("a");12 13function calSum(){14 15 var a=parseInt(document.getElementById("num1").value);16 17var b=parseInt(document.getElementById("num2").value);18 19document.getElementById("num3").value=(a+b);20 21 }22 23 </script>24 25 </head>26 27<body>28 29 <input type="text" id="num1"/>add<input type="text" id="num2"/>30 31<input type="button" id="btnCal" onclick="calum()" value="equal"/><input type="text"id="num3"/>32 33 </body>34 35 </html>
上面的代码中，红色标记部分显然是错误的，在IDE中有些错误是检查不出来的（特别是跟浏览器有关的部分）。加载该页面后，可以在显示栏看到报错信息，然后直接定位至出错点。
Javascript错误位置定位
5.3 添加断点及单步
5.3.1 断点中断
可以通过单击左侧侧添加断点，并在右侧显示。也可以通过watch expression添加查看的变量。
我们添加了一个断点，如果在页面上的操作执行到断点处，就会在断点处终止。然后，我们可以通过右侧最上面的按钮调试，与VS等IDE的调试非常相近。Call stack是显示函数的调用栈，在调试大规模的javascript程序是非常有用。
单步调试
5.3.2 页面中断调试
除了给设定常规断点外, 还可以在某一特定事件发生时中断(不针对元素) , 在 Scripts 面板右侧, 有个 Event Listener Breakpoints, 这里列出了支持的所有事件, 不仅 click, keyup 等事件, 还支持 Timer(在 setTimeout setInterval 处理函数开始执行时中断), onload, scroll 等事件。
6 显示行（命令行）
命令行对于我们这种菜鸟有一个非常有用的地方，对于javascript提供的API或者API的功能不是非常熟悉。这个时候命令行就成为我们试验最好的地方。如，我们想查看document下面有哪些函数，我们就可以在命令行中输入，然后选中并尝试。对于jquery等开源框架的学习，这种方式也非常高效，学代码还是得跑起来才行。
我们可以在命令行里面直接改变内存中的内容，对于小函数我就可以用这样的方式直接替换。
我们按enter是对输入的内容运行，如果要换行需要按shift+enter。在这里面，我们直接在命令行里面里面讲calSum函数覆盖掉，a+b换成了a*b。运行结果如下所示。
命令行使用
运行结果
谷歌浏览器Chrome developer tool详细介绍的更多相关文章
- 浏览器开发者工具Chrome Developer Tool
开发者工具Chrome Developer Tool https://developers.google.com/chrome-developer-tools/docs/profiles 一直被墙 ...
- chrome developer tool—— 断点调试篇
断点,调试器的功能之一,可以让程序中断在需要的地方,从而方便其分析.也可以在一次调试中设置断点,下一次只需让程序自动运行到设置断点位置,便可在上次设置断点的位置中断下来,极大的方便了操作,同时节省了时 ...
- chrome developer tool 调试技巧
这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的, 因为 google 也在不断完善chrome developer tool, 所以 chrome 版本不同可能稍有差别. ...
- chrome developer tool 调试技巧2
我大概是从 08.09 年从 Firebug 转入 Chrome Developer Tool,一直用到现在,越用越喜欢.我平时调错时常用的功能有: 代码格式化可以将被压缩的代码自动展开 实时代码编辑 ...
- 转载|chrome developer tool—— 断点调试篇
断点,调试器的功能之一,可以让程序中断在需要的地方,从而方便其分析.也可以在一次调试中设置断点,下一次只需让程序自动运行到设置断点位置,便可在上次设置断点的位置中断下来,极大的方便了操作,同时节省了时 ...
- [转]chrome developer tool 调试技巧
这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的, 因为 google 也在不断完善chrome developer tool, 所以 chrome 版本不同可能稍有差别. ...
- 谷歌浏览器(Google Chrome)开发调试详细介绍
很多Web前台开发者都喜欢这种浏览器自带的开发者工具,这对前台设计.代码调试很大帮助的. Chrome浏览器得益于其优秀的V8解释器,javascript执行速度和内存占有率表现非常优秀.对于html ...
- Chrome developer tool：本人钟爱的 console、Network 功能简谈
在最开始时,本人调试查看网页,一直用的是 firefox 的 firebug 插件,并没有使用 chrome 的 developer tool .只不过,在日常生活使用过程中,一直使用的是 chrom ...
- Chrome调试工具developer tool技巧
Chrome这个浏览器赞的不能再赞了,给前端的开发调试工作带来了极大的效率提升. Chrome的简洁.快速吸引了无数人,它的启动速度.页面解析速度都很快,同时得益于Google V8的快速,Javas ...
随机推荐
- Elasticsearch学习概念之curl
curl,简单认为是可以在命令行下访问url的一个工具.即增删改查. curl是利用URL语法在命令行方式下工作的开源文件传输工具,使用curl可以简单实现常见的get/post请求. 查看curl的 ...
- Linux JDK1.4卸载与1.6的安装
Linux JDK卸载与安装 一.jdk1.4卸载 Redhat Enterprise 5 中自带安装了jdk1.4,在安装jdk1.6前,把jdk1.4卸载: 1.首先查看系统自带JDK的版本: [ ...
- VC代码生成里面的/MT /MTd /MD /MDd的意思
VC代码生成里面的/MT /MTd /MD /MDd的意思. 意思上已经很明白了.但是往往很多人弄不清楚到底怎么选择. /MT是 "multithread, static version ” ...
- 2016年第七届蓝桥杯国赛试题（JavaA组）
1.结果填空 (满分19分)2.结果填空 (满分35分)3.代码填空 (满分21分)4.程序设计(满分47分)5.程序设计(满分79分)6.程序设计(满分99分) 1.阶乘位数 9的阶乘等于:3628 ...
- POJ - 1458 Common Subsequence DP最长公共子序列（LCS）
Common Subsequence A subsequence of a given sequence is the given sequence with some elements (possi ...
- JAVA企业级开发-BOM&DOM(03)
一.BOM对象介绍 BOM对象:Browser Object Model 浏览器对象模型.把整个浏览器当做一个对象来处理. 一个浏览器对象中又包含了其他的对象. 重点介绍:window.history ...
- memcached 扩展安装（windows）
在脚本之家里下载扩展压缩包 https://www.jb51.net/softs/392873.html 安装扩展前得先安装memcached并启动 下载完扩展压缩包解压并找到对应自己php版本 复制 ...
- firefly
firefly (9秒社团-游戏服务端开源引擎) 编辑 Firefly是免费.开源.稳定.快速扩展.能 “热更新”的分布式游戏服务器端框架,采用Python编写,基于Twisted框架开发.它包括了开 ...
- html常用标签及属性,常用英语单词
目录 html常用标签 html常用标签属性 前端常用英语单词表(未完待续) 欢迎评论点赞交流,转发请添加原博客连接谢谢! Ctrl键+F 可以查找你想要的内容哦! html常用标签 htmi结构 & ...
- Linux常用命令汇总（未完，待补充）
由于工作中经常要和Linux服务器打交道,故整理了一些常用的Linux命令,方便新入职的同学或实习生参考学习. 1. 查看Linux内核版本 #uname -a 2. ctrl+insert:复制选中 ...