谷歌浏览器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 ...
随机推荐
- 【机器学习】迭代决策树GBRT（渐进梯度回归树）
一.决策树模型组合 单决策树C4.5由于功能太简单,并且非常容易出现过拟合的现象,于是引申出了许多变种决策树,就是将单决策树进行模型组合,形成多决策树,比较典型的就是迭代决策树GBRT和随机森林RF. ...
- Python开发【第四篇】：运算符
1. 算术运算符 算术运算符包括+.-.*./.%.//.**,即加减乘除,取余,取商(地板除法)以及幂运算. >>> 5 + 2 7 >>> 5 - 2 ...
- Codeforces617E【莫队算法+前缀异或】
题意: 给出一系列数,对每个查询区间,计算有多少个子区间异或为k. 思路: 可以先预处理异或前缀,一个区间[L,R]的异或值=sum[R]^sum[L-1]; 如果当前区间是[a,b],加一个右端点b ...
- 转载-【深度学习】深入理解Batch Normalization批标准化
全文转载于郭耀华-[深度学习]深入理解Batch Normalization批标准化: 文章链接Batch Normalization: Accelerating Deep Network T ...
- 如何获取input框type=file选中的文件对象（FileReader）
$("input[type='file']").change(function() { var file = this.files[0]; if (window.FileReade ...
- unity2017分离动作
http://tsubakit1.hateblo.jp/entry/2015/06/01/235939 using UnityEngine; using UnityEditor; using Syst ...
- ue4 log
在Unreal Engine 4中,打Log很方便,可以使用宏: [cpp] view plain copy print? UE_LOG(LogTemp, Warning, TEXT("Yo ...
- pytest框架（五）
代码示例一 # coding=utf-8 import pytest @pytest.fixture() def login(): print("输入账号,密码先登录") def ...
- PAT甲级——1107 Social Clusters (并查集)
本文同步发布在CSDN:https://blog.csdn.net/weixin_44385565/article/details/90409731 1107 Social Clusters (30 ...
- Js 文件上传后缀验证
//img格式验证 function imgFormat(name) { //再对文件名进行截取,以取得后缀名 var namearr= name.split("."); //获取 ...