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详细介绍的更多相关文章

  1. 浏览器开发者工具Chrome Developer Tool

    开发者工具Chrome Developer Tool https://developers.google.com/chrome-developer-tools/docs/profiles   一直被墙 ...

  2. chrome developer tool—— 断点调试篇

    断点,调试器的功能之一,可以让程序中断在需要的地方,从而方便其分析.也可以在一次调试中设置断点,下一次只需让程序自动运行到设置断点位置,便可在上次设置断点的位置中断下来,极大的方便了操作,同时节省了时 ...

  3. chrome developer tool 调试技巧

    这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的, 因为 google 也在不断完善chrome developer tool, 所以 chrome 版本不同可能稍有差别. ...

  4. chrome developer tool 调试技巧2

    我大概是从 08.09 年从 Firebug 转入 Chrome Developer Tool,一直用到现在,越用越喜欢.我平时调错时常用的功能有: 代码格式化可以将被压缩的代码自动展开 实时代码编辑 ...

  5. 转载|chrome developer tool—— 断点调试篇

    断点,调试器的功能之一,可以让程序中断在需要的地方,从而方便其分析.也可以在一次调试中设置断点,下一次只需让程序自动运行到设置断点位置,便可在上次设置断点的位置中断下来,极大的方便了操作,同时节省了时 ...

  6. [转]chrome developer tool 调试技巧

    这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的, 因为 google 也在不断完善chrome developer tool, 所以 chrome 版本不同可能稍有差别. ...

  7. 谷歌浏览器(Google Chrome)开发调试详细介绍

    很多Web前台开发者都喜欢这种浏览器自带的开发者工具,这对前台设计.代码调试很大帮助的. Chrome浏览器得益于其优秀的V8解释器,javascript执行速度和内存占有率表现非常优秀.对于html ...

  8. Chrome developer tool：本人钟爱的 console、Network 功能简谈

    在最开始时,本人调试查看网页,一直用的是 firefox 的 firebug 插件,并没有使用 chrome 的 developer tool .只不过,在日常生活使用过程中,一直使用的是 chrom ...

  9. Chrome调试工具developer tool技巧

    Chrome这个浏览器赞的不能再赞了,给前端的开发调试工作带来了极大的效率提升. Chrome的简洁.快速吸引了无数人,它的启动速度.页面解析速度都很快,同时得益于Google V8的快速,Javas ...

随机推荐

  1. [hdu1269]迷宫城堡(SCC)

    题意:求一张图的强连通分量,若为1,则输出yes,否则输出no. 解题关键:targin算法模板题. #include<iostream> #include<cstring> ...

  2. JMeter聚合报告（Aggregate Report）理解

    部分内容转载: http://blog.csdn.net/lion19930924/article/details/51189218 http://www.cnblogs.com/fnng/archi ...

  3. why std::stack has separate top() and pop()

    SGI explanation: http://www.sgi.com/tech/stl/stack.html One might wonder why pop() returns void, ins ...

  4. 关于 == 和 equals() 的区别

    对于正在学习java的,以及入行不久的小伙伴们,在面试中经常会被面试官问到 "  == 和 equals() 的区别 ?"的问题,你是否回答好了呢? 示例一: //两个基本类型数据 ...

  5. Celery异步任务重复执行（Redis as broker）

    之前讲到利用celery异步处理一些耗时或者耗资源的任务,但是近来分析数据的时候发现一个奇怪的现象,即是某些数据重复了,自然想到是异步任务重复执行了. 查阅之后发现,到如果一个任务太耗时,任务完成时间 ...

  6. 352. Data Stream as Disjoint Intervals (TreeMap, lambda, heapq)

    Given a data stream input of non-negative integers a1, a2, ..., an, ..., summarize the numbers seen ...

  7. 每次移1px的无缝轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 3DMAX 多维材质及对应的UVW展开，UVW贴图

    多维材质说明 多维材质就是一个模型多个材质,(混合材质是多个材质混一起,跟这个貌似没关,比如地表草地,泥土等的混合操作) 作用: 比如一个模型就是需要两种材质,刀的金属刀身,木质刀柄,墙的一面是木板, ...

  9. cinder存储服务

    一.cinder 介绍: 理解 Block Storage 操作系统获得存储空间的方式一般有两种: 1.通过某种协议(SAS,SCSI,SAN,iSCSI 等)挂接裸硬盘,然后分区.格式化.创建文件系 ...

  10. pytest框架（四）

    测试用例setup和teardown 代码示例一 # coding=utf-8 import pytest def setup_module(): print("setup_module:整 ...