很多Web前台开发者都喜欢这种浏览器自带的开发者工具，这对前台设计、代码调试很大帮助的。

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控制面板

如上图所示，我选中

标签之后，在页面中显示的对应的元素就会选中。如果，我现在要定位百度一下这个按钮，我可以通过左下角的放大镜，在页面中选中百度一下，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浏览器的调试也非常强大，在以前开发工程中通常通过两个浏览器调试器的配合使用进行。当然，如果工程要求比较高，肯定要在不同浏览器下分别调试。

谷歌浏览器(Google Chrome)开发调试详细介绍的更多相关文章

  1. Google Chrome浏览器调试功能介绍

    作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.ht ...

  2. Google Chrome浏览器调试入门————转载只为自己查看方便

    Google Chrome浏览器调试 作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/20 ...

  3. Console的使用——Google Chrome代码调试

    Google Chrome控制台为开发者提供了网页和应用程序调试的几种方法,本文通过基本操作.控制台API.命令行API来介绍控制台的使用. 基本操作 1.开启控制台     可以通过下列三种方式开启 ...

  4. 【转】Google Chrome浏览器调试

    作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.ht ...

  5. Google Chrome浏览器调试

    作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.ht ...

  6. 利用Google Chrome开发插件，在网页中植入js代码

    Google Chrome是一个很强大的浏览器,提供了各种各样的插件,大大提升了使用了的效率,比如vimium.honx等. Google在提供这些插件的同时还允许用户开发自己的插件. 最近在写js的 ...

  7. google vue开发调试插件，简便安装，亲测可用

    前言:开发vue项目,使用谷歌浏览器,不得不使用调试插件便于调试 插件地址如下: 链接:https://pan.baidu.com/s/159HqJMeFSF-w5z-tMi7drw 密码:ueez ...

  8. 谷歌浏览器Chrome developer tool详细介绍

    http://www.cr173.com/html/19114_4.html 第 4 页 js调试源码控制面板 5 源码控制面板(js调试) Javascript的调试,基本上是通过源码控制面板和命令 ...

  9. 谷歌浏览器 Google Chrome 70.0.3538.102 便携版

    oogle Chrome 是由Google开发的一款设计简单.运行高效.支持扩展的浏览器,它基于高速WebKit/Blink内核和高性能JavaScript V8引擎,在支持多标签浏览的基础上,提供顺 ...

随机推荐

  1. linux环境上 rocketmq 安装部署

    Rocketmq-简单部署   一.准备环境 1.系统:Centos7.3(无硬性要求) 2. jdk:1.8 3.maven:3.5(无硬性要求) 4.git 5.rocketmq 4.2 二.环境 ...

  2. 通过JAX-WS实现WebService

    (一)服务端的创建 一,首先创建一个Web 项目,或者创建一个Web Service项目也行(差别就是后者在开始就设置了Web Service的调用方式) 二,在项目中创建一个类作为我们要发布的服务( ...

  3. Centos7.3 安装MYSQL

    安装mysql         1.进入到要存放安装包的位置             mkdir /home/lnmp             cd /home/lnmp         2.查看系统 ...

  4. 【判环】Perpetuum Mobile

    Perpetuum Mobile 题目描述 The year is 1902. Albert Einstein is working in the patent office in Bern. Many ...

  5. Java中编码问题

    在开发过程中经常会遇到一会乱码问题,不是什么大问题,但是也挺烦人的,今天来将我们开发总结的经验记录下来,希望可以给大家一些帮助. 一些概念: 字符:人们使用的记号,抽象意义上的一个符号.比如:‘1’, ...

  6. (二)如何利用C# Roslyn编译器写一个简单的代码提示/错误检查？

    上一篇我们讲了如何建立一个简单的Roslyn分析项目如分析检查我们的代码. 今天我们主要介绍各个项目中具体的作用以及可视化分析工具. 还是这种截图,可以看到解决方案下一共有三个项目. Analyzer ...

  7. CentOS 系统下使用 yum 安装 Redis

    本文主要介绍在 CentOS 7 系统下使用 yum 安装 Redis 的过程. 更改 yum 源 将 Centos 的 yum 源更换为国内的阿里云源. 首先备份你的原镜像文件,保证出错后可以恢复: ...

  8. 【前端】安装wampserver提示丢失MSVCR100.dll的解决方法

    先装Visual C++,再装wampserver 下载的时候请注意选择对应的32bit还是64bit的.然后安装. 再安装wamp

  9. 数据库入门(mySQL)：创建数据库

    基于JetBrains DataGrip创建数据库.SQL语句创建数据库 MySQL数据库存储引擎和数据类型 创建数据库表及基本操作 导出数据库.删除数据库.导入数据库 一.基于JetBrains D ...

  10. python matplotlib拟合直线

    import numpy as np import matplotlib.pyplot as plt plt.rcParams['font.family'] = ['sans-serif'] plt. ...