`
hejiajunsh
  • 浏览: 409834 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

Chrome developer tool介绍(javascript调试)

阅读更多

Chrome浏览器得益于其优秀的V8解释器,javascript执行速度和内存占有率表现非常优秀。对于html+css+javascript前台技术的学习或者开发,浏览器developer tool的使用时必不可少的,也能极大的提高学习或者开发效率。本文根据版本 23.0.1271.10。在window下,开启developer tool的快捷键为F12。

1 Developer tool功能结构

 

  Developer tool的功能栏有8个,分别是标签、资源、网络、源码、时间轴、性能、监察和显示(命令行)。

2 Element panel

 

2.1 Element控制面板基本功能

  Element控制面板能够让你查看所有的DOM tree中的内容,可以根据html内容找到页面中的元素或者根据页面中的定位标签,同时可以改变DOM的内容。由javascript代码产生的标签,也只能通过这种方式查看了(在你的IDE中无法看到)。

Element控制面板

      如上图所示,我选中<div id=”fm”>标签之后,在页面中显示的对应的元素就会选中。如果,我现在要定位百度一下这个按钮,我可以通过左下角的放大镜,在页面中选中百度一下,DOM中也会把对应的标签给你找出来。这个功能在调试时绝对是利器。最下面显示的是现在选中标签在DOM中的层次关系。

 

选元素找标签功能

  我们也可以对里面的内容进行临时性修改,如刚才找到的百度一下标签中的value改成“调试一下”后马上在页面中相应显示。

 

临时修改内容

2.2 右侧功能栏

 

2.2.1 style查看

  使用css时,存在着样式覆盖等问题,有的时候显示的样式可能出乎你的意料,或者对元素的大小位置(特别是窗口)的查看。同时,我们也可以在这里进行临时修改,在页面中反应(真正的所见即所得,不是别的IDE所能替代的)。

 

修改样式或大小

2.2.2 标签注册事件查看

  如果你想知道“百度一下”这个按钮注册了哪些功能,或者鼠标点击时执行了哪个javascript函数,就可以通过这个功能实现了。

 

选中百度一下标签,定位keydown事件,找到对应的执行函数

2.2.3 查找功能

  Ctrl+F可以调出查找,查找你想要的内容,非常实用。

3 资源控制面板

  资源控制面板包括了这个页面中下载下来的所有的资源,同时也包括本地的cookie,还有html5中local storage等高级功能。

 

资源查看面板

4 网络控制面板

  网络控制面板在两个方面还是非常还用的,一个是发现图片(css、js等)加载不了,可以通过network查看它请求的位置。第二个,是调试ajax时,可以查看它的请求和获取。如百度输入框中,输入关键字后会自动显示热门内容,这显然是一个ajax的使用。

 

网络加载显示

查看http请求和获得的内容

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 <html xmlns="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 
13  function calSum(){
14 
15   var a=parseInt(document.getElementById("num1").value);
16 
17   var b=parseInt(document.getElementById("num2").value);
18 
19   document.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。运行结果如下所示。

 

命令行使用

 

运行结果

7 性能查看控制面板(profiles)

  这个控制面板允许我们查看函数运行时CPU占有率,还有内存占有率。这能够帮助我们优化代码,查看代码性能(内存还能查看闭包泄露等)。

 

  按start可以分析,现在的内存占有率。进行操作后,再得到第二份内存分析报告,这样我们就能通过内存变化来进行分析了。在底栏,还有对比、总结等选项。

 

第一份内存分析报告

 

第二份内存分析报告

 

8 其他

  在调试过程中,可能还会受别的因数影响,如迅雷下载插件xl.js等,在开发时把这些东西禁用掉。Firefox浏览器的调试也非常强大,在以前开发工程中通常通过两个浏览器调试器的配合使用进行。当然,如果工程要求比较高,肯定要在不同浏览器下分别调试。

9 参考文献

http://ued.taobao.com/blog/2012/06/debug-with-chrome-dev-tool/

https://developers.google.com/chrome-developer-tools/docs/profiles

分享到:
评论

相关推荐

    ie网页调试工具 IE Develope Tool Bar 直接调试预览网页样式

    本文将详细介绍“IE Developer Tool Bar”,这是一个专为Internet Explorer设计的网页调试工具,它允许用户直接在IE浏览器中调试预览网页样式,类似于Firefox的Firebug。 “IE Developer Tool Bar”(简称IEDT)是...

    Chrome development tools

    Chrome开发工具是Google Chrome浏览器内置的一套强大的Web前端开发和调试工具,对于前端开发者来说,它是不可或缺的工作伙伴。这套工具提供了丰富的功能,帮助开发者检查、修改和调试网页内容,优化性能,以及解决...

    Javascript document

    some very good books about javascript,if u complete those books and can use some debug tools such as FireBug or chrome developer tool, then u will have a very good comprehension of javascript

    javascript tool

    浏览器内置的开发者工具(如Chrome DevTools或Firefox Developer Tools)提供了强大的断点调试、性能分析和网络请求监控等功能,帮助开发者定位和修复问题。 测试框架如Jest或Mocha,确保了代码的质量和稳定性。...

    Chrome-Developer-Tool-Bar-Tips:Chrome 开发者工具栏隐藏的技巧和窍门

    Chrome-Developer-Tool-Bar-Tips Chrome 开发者工具栏隐藏的技巧和窍门提示 1:漂亮的打印{}: Chrome 有一个漂亮的打印功能,它将采用缩小的 JavaScript 文件并格式化它的属性。 您需要做的就是单击底部工具栏上的...

    react reduce dev tool

    React Reduce Dev Tool是一款专为React开发人员设计的强大调试工具,它结合了Redux DevTools和React Developer Tools的功能,帮助开发者在构建React应用时更好地理解和优化状态管理。这个压缩包包含了两个关键组件:...

    Javascript中的delete介绍

    一、问题的提出 我们先来看看下面几段代码,要注意的是,以下代码不要在浏览器的开发者工具(如FireBug、Chrome Developer tool)中运行,原因后面会说明: 为什么我们可以删除对象的属性: 代码如下: var o = { x: 1 ...

    js调试工具

    本篇将详细介绍两款常用的JS调试工具及其功能,帮助开发者更好地理解并使用这些工具。 1. **Chrome DevTools**: Chrome浏览器内置的开发者工具(DevTools)是一款强大的JS调试工具。它提供了多个模块,如Elements...

    React_Tools.zip

    React Developer Tools是一款强大的JavaScript库,专门用于调试React应用程序。它为开发者提供了深入理解React组件层次结构、性能瓶颈以及状态变化的工具。这个压缩包“React_Tools.zip”包含的是React Developer ...

    react-developtool.rar

    React Developer Tools通常以浏览器扩展的形式存在,支持Chrome和Firefox等主流浏览器,可以在浏览器的开发者工具中集成,提供了一套直观的界面来查看和操作React组件树。 以下是React Developer Tools的主要功能和...

    developerTool:帮助web开发者快速进行dev、debug、online环境之间的切换,提高web开发者工作效率

    开发者工具 Tampermonkey 脚本主要功能快速切换网站环境, 例如 dev 切换到 debug自动识别网站中的缩略图, 显示显示原图按钮, 可一键查看原图, 不用手动一一更改安装 Tampermonkey首先需要安装 Chrome 浏览器插件 , ...

    marty-devtools:马蒂的 Chrome 开发者工具

    Marty Chrome 开发者工具开发快速入门运行make build-watch 安装打开 Chrome Apps & Extensions Developer Tool,点击 Extensions &gt; Load unpacked,导航到克隆的 repo 打开 Chrome

    formbot-chrome-ext:一个自动填表程序Chrome扩展程序,用于开发和测试,甚至还可以进行演示

    检查Developer mode. 点击Load unpacked extension... 使用文件浏览器导航到扩展包已解压缩的目录。 单击Select或OK Formbot图标应该出现在您的工具栏中,也应该出现在扩展列表的顶部。 复选框和单选按钮 如果...

    piez:使用Akamai图像管理器查看图像字节节省

    派兹 目的 该程序的目的是展示Akamai图像管理器,推送/预连接,资源优化器和脚本管理服务... 3) Open the developer tool bar by clicking "View &gt; Developer &gt; Developer Tools" in the browser OR hitting Command +

    ztype-trainer:著名打字游戏ZType(http

    在Chrome中,打开“ Developer Tool ”(在Windows上按F12键),转到“ Console标签,粘贴并执行以下代码: var script = document.createElement("script");script.type = "text/javascript";script.src = ...

    Extending Bootstrap PDF

    Chapter 3, Creating Your Own Build, uses the customize tool from the Bootstrap site to create your own build of Bootstrap. Chapter 4, LESS is More, provides an introduction to LESS, a preprocessed ...

    AjaxControlToolkit

    同时,由于大部分功能都在客户端运行,调试工具如Chrome DevTools或Firefox Developer Tools会非常有用,它们可以帮助定位和解决问题。 总之,AjaxControlToolkit为ASP.NET开发者提供了一套强大而易用的AJAX解决...

    grpc-web-devtools:Chrome和Firefox浏览器扩展程序可使用本机gRPC-Web拦截器帮助gRPC-Web开发

    与其他gRPC-Web拦截器不兼容并破坏了它们,这使得无法通过gRPC-Web调试JWT授权之类的东西。 此版本通过将扩展重新实现为一对本地gRPC-Web拦截器来解决此问题。 现在,您可以在链中包括调试拦截器以及其他gRPC-Web...

    Wget tools download

    - `mail.wo.com.cn`、`yunshangdian.com`、`s.weibo.com`、`developer.chrome.com`、`vdisk.weibo.com`、`e.weibo.com`、`weibo.com`、`zx.passport.189.cn`:这些可能是网站的URL,可能被用于示例或者作为Wget实际...

Global site tag (gtag.js) - Google Analytics