常用的前端调试工具

以你之姓@ 2022-06-16 08:12 282阅读 0赞

# 常用的前端调试工具 #

在做前端开发时，我们需要用到一些调试工具用来调试我们的HTML、CSS或者JS代码，俗话说预先善其事必先利其器，这里我给大家推荐几款比较常用的前端调试工具。

1、Chrome的开发者工具

这是我现在用的最多的一个浏览器调试工具，在经过了几个版本的更新，其调试功能也日渐强大。在打开Chrome后可以通过点击“F12”功能键、“Ctrl Shift I”或者“Ctrl Shift J”打开开发者工具。也可以通过工具 - 开发者工具 打开。

2、firefox插件Firebug

这是我在Chrome浏览器出现之前常用的调试工具，在Chrome出来之后就很少使用了，可以在firefox浏览器 - 添加附件 - 搜索firebug - 安装，然后在firefox浏览器的右上角会有个虫子的图标，那个就是firebug了。除此之外，firefox也内置了开发者的工具，可以从设置按钮打开开发者工具。

3、IE的开发者工具

某些内部应用的项目都是对IE有较好的支持的，所以这里也顺带提一下IE其实也是有对应的调试工具的，在之前的IE版本中内置的调试工具是相当的丑陋的（我记得是这样的），那目前IE11的调试工具功能也是比较强大，同样可以通过F12打开

4、IETest，IE浏览器版本切换工具

在开发Web项目的时候，经常会碰到需要在不同的IE版本中检查完成的网页是否能正常展现，这时就需要IETest帮我们模拟网页在IE5.5、IE6、IE7、IE8、IE9以及IE10等浏览器中的兼容性，让我们看一下辛苦做好的CSS样式或网站版面是否可以在各个主要浏览器正常显示。

5、Emmet

emmet算是HTML/CSS开发中的神器，如果做前端开发肯定会被emmet强大的功能吸引，他使用了仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，对多种文本编辑器都有较好的支持，下载地址：[http://www.emmet.io][http_www.emmet.io]

6、JSON格式校验工具

JSON的使用越来越平凡，对JSON格式的校验也是很常见的，推荐2个比较方便的JSON校验工具，一个是在线的网站

[https://jsonformatter.curiousconcept.com/][https_jsonformatter.curiousconcept.com]

另外一个是Notepad 的Json Viewer插件

7、JS压缩和解压缩工具

现在的很多JS插件都是采用min压缩格式提供的，以提高其网络传输速度，但问题来了，我们有时需要查看被压缩的js文件的源码，而另一些时候我们又需要将我们写的js文件进行压缩，这里提供几种方式：

在线的压缩解压缩工具：

[http://tool.oschina.net/jscompress][http_tool.oschina.net_jscompress]

[http://tool.css-js.com/][http_tool.css-js.com]

本地的，我一直是使用notepad 的一个JSTool工具来实现的，该工具能很容易的实现对JS文件的压缩和解压缩

## 调试工具的使用 ##

常用的调试工具有Chrome浏览器的调试工具，火狐浏览器的Firebug插件调试工具，IE的开发人员工具等。它们的功能与使用方法大致相似。Chrome浏览器简洁快速，功能强大这里主要介绍Chrome浏览器的调试工具。

> 打开 Google Chrome 浏览器，通过下面任何一种方式进入开发人员工具：  
> \-点击位于浏览器用户界面右上角的“页面”下拉菜单，“更多工具”→“开发人员工具”。  
> \-右键点击网页上的任一元素，在弹出菜单中选择“审查元素”。  
> \-在 Windows操作系统上，使用 Ctrl+Shift+I 快捷键打开开发人员工具（或使用 Ctrl+Shift+J 直接进入 JavaScript 控制台）。

Chrome一共有8个功能子集。每一个图标点击后都会打开相应的调试面板，帮助您获取各种不同的信息，如 DOM 树、资源占用情况、页面相关的脚本等。通过 Ctrl+\[ 和 Ctrl+\] 键，可以在这些项之间进行切换。每个模块及其主要功能为：

> Element 标签页： 用于查看和编辑当前页面中的 HTML 和 CSS 元素。  
> Network 标签页：用于查看 HTTP 请求的详细信息，如请求头、响应头及返回内容等。  
> Source 标签页：用于查看和调试当前页面所加载的脚本的源文件。  
> TimeLine 标签页： 用于查看脚本的执行时间、页面元素渲染时间等信息。  
> Profiles 标签页：用于查看 CPU 执行时间与内存占用等信息。  
> Resource 标签页：用于查看当前页面所请求的资源文件，如 HTML，CSS 样式文件等。  
> Audits 标签页：分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案，用于优化前端页面，加速网页加载速度等。  
> Console 标签页：用于显示脚本中所输出的调试信息，或运行测试脚本等。

一.Elements：

在元素（Elements）面板中，可以看到整个页面的 DOM 树结构和每个元素的所有属性（即html和css），同时也可以实时地修改这些元素及其属性，并可以实时看到修改后的效果。

1.Styles

\-编辑HTML：在工具窗口左侧是html代码，可通过双击修改现有标签的属性值，也可选中html代码片段右击选择“Edit as HTML”进行html代码的修改；

\-编辑属性：在工具窗口右侧显示的是被选元素的样式信息，可以通过双击现有属性来修改该元素的 style 属性或应用的某个选择器中的属性值，也可以通过取消勾选的方式去掉一些属性，同时页面实时变化。

\-添加属性：鼠标双击您所想修改的元素的选择器的空白部分，即可添加属性。添加任何属性都必须以分号结束。你也可以直接点击+号，添加新选择器并进行属性操作。  
\-可以直接在盒模型上更改margin和padding。

\-搜索功能：当工具面板获得焦点后，快捷键ctrl+f会打开搜索框，键入元素关键字进行搜索。

\-你还可以对某个元素进行监听，在JS对元素的属性或者HTML进行修改的时候，直接触发断点，跳转到对改元素进行修改的JS代码处：

\-拖拽节点, 调整顺序。拖拽节点到编辑器

注：像素大小，可以通过鼠标的滚轮调整，调整单位1px（百分比调整单位1%）；按住ALt，调整单位0.1px；同时按住Shift+ALt，调整单位10px。

总之，把可以点的都点一遍。

2.Computed

显示的是所选元素的最终样式（对应JS中的getComputedStyle()方法），Computed Style中的属性是只读的，不能实时修改，所以主要用来查看元素的最终属性值。

\+Event Listeners

显示了绑定到当前元素的事件监听函数，而且会显示事件冒泡或捕获（即能够响应此事件的所有元素）。

右击标签，审查元素；出现工具栏-》菜单 Elements，查看右侧菜单-》EventListeners，查看元素上绑定了哪些事件：

默认会列出 All Nodes, 这些包括代理绑定在该节点的父/祖父节点上的事件, 因为在在冒泡或捕获阶段会经过该节点  
Selected Node Only 只会列出当前节点上绑定的事件  
每个事件会有对应的几个属性 handler, isAtribute, lineNumber, listenerBody, sourceName, type, useCapture

> \-handler是处理函数, 右键可以看到这个函数定义的位置, 一般 js 库绑定事件会包一层, 所以这里很难找到对应handler  
> \-isAtribute 表明事件是否通过 html 属性(类似onClick)形式绑定的  
> \-useCapture 是 addEventListener 的第三个参数, 说明事件是以冒泡还是捕 顺序执行  
> \-右击handler选择“Show function definition”可以进入Sources里js文件中。

Properties：显示当前元素的DOM属性，按照类的继承层级排列，越靠下层级越高。最上面是一个HTMLDivElement的实例，第二个是HTMLDivElement的类。第三个，是HTMLElement类，HTMLDivElement类继承自HTMLDivElement类。接着分别是Element类，Node类，和Object类。如果选择不同的节点类型，就会出现不同的继承关系。

这个很有用，可以让你看到元素具有的方法与属性，比查API手册要方便，但要注意某些方法和属性在IE、FireFox等其他浏览器下面的支持情况。

二.Network

请求的每个资源在Network表格中显示为一行，每个资源都有许多列的内容(如红色区块1)，不过默认情况下不是所有列都显示出来。

> Name/Path: 资源名称以及URL路径；  
> Method: HTTP请求方法；  
> Status/Text: HTTP状态码/文字解释；  
> Type: 请求资源的MIME类型；

Initiator解释请求是怎么发起的，有四种可能的值：

> Parser：请求是由页面的HTML解析时发送的；  
> Redirect：请求是由页面重定向发送的；  
> Script：请求是由script脚本处理发送的；  
> Other：请求是由其他过程发送的，比如页面里的link链接点击，在地址栏输入URL地址。

响应请求

> Size/Content: Size是响应头部和响应体结合起来的大小，Content是请求内容解码后的大小。进一步了解可以看这里Chrome Dev Tools - “Size” vs “Content”；  
> Time/Latency: Time是从请求开始到接收到最后一个字节的总时长，Latency是从请求开始到接收到第一个字节的时间；  
> Timeline: 显示网络请求的可视化瀑布流，鼠标悬停在某一个时间线上，可以显示整个请求各部分花费的时间。  
> 以上是默认显示的列，不过我们可以在瀑布流的顶部右键，这样就可以选择显示或者隐藏更多的列，比如Cache-Control, Connection, Cookies, Domain等。

我们可以按照上面任意一项来给资源请求排序，只需要单击相应的名字即可。Timeline排序比较复杂，单击Timeline后，需要选择根据Start Time、Response Time、End Time、Duration、Latency中的一项来排序。

红色区块2中，一共有6个小功能：

> Record Network Log: 红色表示此时正在记录资源请求信息；  
> Clear: 清空所有的资源请求信息；  
> Filter: 过滤资源请求信息；  
> Use small resource raws: 每一行显示更少的内容；  
> Perserve Log: 再次记录请求的信息时不擦出之前的资源信息；  
> Disable cache: 不允许缓存的话，所有资源均重新加载。

选择Filter后，就会出现如红色区块3所显示的过滤条件，当我们点击某一内容类型(可以是Documents, Stylesheets, Images, Scripts, XHR, Fonts, WebSockets, Other)后，只显示该特定类型的资源。在XHR请求中，可以在一个请求上右键选择“Replay XHR”来重新运行一个XHR请求。

有时候我们需要把Network里面内容传给别人，这时候可以在资源请求行的空白处右键然后选择Save as HAR with Content保存为一个HAR文件。然后可以在一些第三方工具网站，比如这里重现网络请求信息。

选定某一资源后，我们还可以Copy as cURL，也就是复制网络请求作为curl命令的参数，详细内容看 Copying requests as cURL commands

此外，我们还可以查看网络请求的请求头，响应头，已经返回的内容等信息

资源的详细内容有以下几个：

> HTTP request and response headers  
> Resource preview: 可行时进行资源预览；  
> HTTP response: 未处理过的资源内容；  
> Cookie names and values: HTTP请求以及返回中传输的所有Cookies；  
> WebSocket messages: 通过WebSocket发送和接收到的信息；  
> Resource network timing: 图形化显示资源加载过程中各阶段花费的时间。

注：

XPath 是一门在 XML 文档中查找信息的语言。XPath 用于在 XML 文档中通过元素和属性进行导航。比如，

这里a标签的Xpath为：/html/body/div\[2\]/p\[1\]/a，解读为：html里面body标签的第二个div标签的第一个p标签下的a标签。

三.Sources

用于查看和调试当前页面所加载的脚本的源文件。

\-通过左边的内容源，打开对应的 JavaScript 文件，鼠标点击文件的行号就可以设置和删除断点。添加的每个断点都会出现在右侧调试区的 Breakpoints 列表中，点击列表中断点就会定位到内容区的断点上。如果你有多个文件、多个断点的话，利用 Breakpoints 列表中的断点快速定位非常方便。

\-对于每个已添加的断点都有两种状态：激活和禁用。刚添加的断点都是激活状态，禁用状态就是保留断点但临时取消该断点功能。在 Breakpoints 列表中每个断点前面都有一个复选框，取消选中就将禁用该断点。断点位置的右键菜单中也可以禁用断点。也可以在右侧功能区上面

按钮临时禁用所有已添加的断点，再点一下恢复原状态。

\-条件断点：在断点位置的右键菜单中选择“Edit Breakpoint...”可以设置触发断点的条件，就是写一个表达式，表达式为 true 时才触发断点。

\-很多代码是压缩/混淆过的，点击“\{\}”可以格式化代码，再点一下就取消格式化。。

\-在断点调试时，可以用鼠标选择想要查看的变量或表达式，然后右键菜单执行“Evaluate in Console”，就可以看到该表达式的当前的值了。

1.代码断点

设置断点：在 Sources 面板 js 文件行号处设置断点, 这里除了常规断点外, 还有个条件断点(右键 conditional breakpoint), 在设置的条件为 true 时才会断电, 在循环中需要断点时比较有用.  
断点后可以查看 堆栈, 变量 信息:  
在调用堆栈这里可以切换到堆栈中的任何地方重新执行(右键restart frame), 如果想查看断点前的信息时比较有用.

断点后的变量保存到全局  
选中变量, 右键 Evalute in console  
在 console 中选中输出的内容, 右键 store as global variable

2.事件断点

元素上事件断点：某一事件/某类事件  
devtools 可以查看某一个元素上绑定了哪些事件: Elements > Event Listeners

3.DOM 断点

一般是 dom 结构改变时触发。 有时候我们需要监听某个 DOM 被修改情况，而不关心是哪行代码做的修改（也可能有多处都会对其做修改）。那么我们可以直接在 DOM 上设置断点。

在元素审查的 Elements Panel 中在某个元素上右键菜单里可以设置三种不同情况的断点：

> 子节点修改  
> 自身属性修改  
> 自身节点被删除

选中之后，Sources Panel 中右侧的 DOM Breakpoints 列表中就会出现该 DOM 断点。一旦执行到要对该 DOM 做相应修改时，代码就会在那里停下来。

对上面元素上事件断点(mouseover) 后不容易找到业务代码, 使用 mutation 断点, 断点后配合 call stack 就可以找到业务代码了

这种情况使用全局搜索(ctrl + shift + f) 代码中 css classname 也能找到业务代码, 然后直接断点也可以。

4.XHR 断点

右侧调试区有一个 XHR Breakpoints，点击+ 并输入 URL 包含的字符串即可监听该 URL 的 Ajax 请求，输入内容就相当于 URL 的过滤器。如果什么都不填，那么就监听所有 XHR 请求。一旦 XHR 调用触发时就会在 request.send() 的地方中断。

5.全局事件断点

devtools 还可以对事件发生时断点, 比如 click 发生时断点, 这个跟 元素上事件断点 不同, 不会限定在元素上, 只要是事件发生, 并且有 handler 就断点; 还可以对 resize, ajax, setTimeout/setInterval 断点.

几个常用的断点快捷键:

> F8: 继续执行  
> F10: step over, 单步执行, 不进入函数  
> F11: step into, 单步执行, 进入函数  
> shift + F11: step out, 跳出函数  
> ctrl + o: 打开文件  
> ctrl + shit + o: 跳到函数定义位置  
> ctrl + shift + f: 所有脚本中搜索

四.TimeLine

用于查看脚本的执行时间、页面元素渲染时间等信息。

可结合Profiles进行JavaScript性能分析。

在开始做性能优化的时候要设置一个基线，来明确这个页面的速度到底怎样。在时间线(timeline)标签下开始记录，载入页面然后停止记录，这样就设置了一个基线。（打开chrome开发者工具，点击“时间线”标签，然后点击窗口底部圆形的黑色“记录”图标开始记录）。chrome是智能的，只有页面开始载入的时候才会开始记录。一般多记录几次（约三次）然后取了平均值。

五.Profiles  
这个主要是做性能优化的，包括查看CPU执行时间与内存占用等。  
例述如下：原文地址：[http://www.smashingmagazine.com/2012/06/12/javascript-profiling-chrome-developer-tools/][http_www.smashingmagazine.com_2012_06_12_javascript-profiling-chrome-developer-tools]。  
你的网站正常运转。现在我们来让它运转的更快。网站的性能由页面载入速度和代码执行效率决定。一些服务可以让你的网站载入更快，比如压缩JS和CDN，但是让代码执行的更快你要做的事情。代码中很小的改动都可能对性能造成巨大的影响。快速灵活的网站和可怕的“无响应脚本”对话框可能只有几行代码的差别。这篇文章告诉你如何通过用Chrome开发者工具（Chrome Developer Tools）找到这几行关键的代码。

在你的应用中进行Javascript性能分析

实际工作中的应用要比“颜色排序器”复杂的多，但是做性能分析要遵循同样的基本原则

1、设置一个基线，这样你就知道你是从何处开始的。

2、把问题从应用的其他代码隔离出来。

3、在一个可控的环境下进行优化，频繁的使用时间线（timelines）和性能分析器（profiles）

还有一些性能优化的准则

1、从最慢的部分开始，这样在时间优化上可以得到最大的提升。

2、控制环境。如果你换了电脑或者做了任何大的改动，都要设置新的基线。

3、多次分析以防你电脑的异常导致得到不正确的结果。

每个人都想要他的网站更快，你必须开发新的功能，但是新的功能通常会让网站更慢。所以花费时间来做性能优化是有价值的。

六.Resource

资源面板展示了页面中的所有资源。

> 1、资源面板tab；  
> 2、左侧栏分类列出页面资源。如“框架”、“session存储”，如果前面有箭头点击展开还可以看到更多信息。注意左侧栏的大小是可以调整的；  
> 3、页面资源包括字体、图片、js、css和页面本身。如果页面中有frame或iframe，展开Frames会看到其对应的frame和iframe。页面层次结构更清晰  
> 4、数据库显示页面相关的SQL数据库数据信息；  
> 5、相应IndexedDB 也展示页面的IndexedDB 信息；  
> 6、以键/值 形式列表展示本地存储的数据；  
> 7、以键/值列表显示session存储数据；  
> 8、根据域名列举cookie；  
> 9、显示通过manifest缓存的资源。包括很多信息，如js库文件会显示文件地址、大小和类型；  
> 10、右侧用来显示每个资源对应的详细信息。

虽然现在由frame组成的页面越来越少见了，但查看框架内容的方法还是有必要了解的。下面截图，是一个由frame组成的页面。

每个frame都相关的资源都在一个文件夹下，同样点击展开可以了解页面的资源、js、css、图片文件和字体情况。点击选中一个框架，页面中其对应的区域会高亮显示。  
注：不会列出系统已有的，如“arial”“Helvetica”等，只会列出浏览器需要下载安装的

*  cookies  
    查看某个网站的cookie信息。如[http://study.163.com/][http_study.163.com]

> \[name\]-字段名。如字段名为“remember\_checked”,其值为1，这可能说明用户在登陆的时候选择了记住我；  
> \[value\]-字段所对应的值。如“\_twitter\_sess”所对应的值为一串加密了的session ID；  
> \[domain\]-cookie所在的域。上图的“.twitter.com”表明其子域也是可以访问该cookie的；  
> \[path\]-跟域相同，设置有效的路径。设置为“/”表明允许所在路径下都可以访问cookie；  
> \[expires\]-浏览器可以删除该cookie的日期；  
> \[size\]-cookie的大小，单位bytes；  
> \[HTTP\]-cookie的访问允许HTTP协议。这可以防止跨站js获取cookie攻击；  
> \[secure\]\]-只允许加密连接访问cookie，如HTTPS；

*  缓存应用

> \[resource\]-资源的完整路径。典型的资源包括静态资源和html文件，manifest文件也属于其中；  
> \[type\]-可以改变。Manifest文件的文件类型是Manifest，其他的manifest文件中定义的文件类型为explicit。Fallback类型的文件是那些需要回调资源文件的回调文件；  
> \[size\]-资源文件的大小，单位bytes；

七.Audits

用于优化前端页面，加速网页加载速度等。

使用Chrome浏览器对页面性能进行检测，根据测试的结果进行优化。当然这个结果只是参考，在实际的项目中肯定有特殊情况存在，并不能为了满足某项测试结果而忽略特定情况的存在。

1、Chrome检测工具

点击Audits然后出现了如下界面，选中重载页面开始检测按钮，然后点击Run按钮，之后就是等待结果。

2、检测结果

这个检测结果分为2类，一个是网络，一个是网页性能；

检测结果不仅列出了问题，还定位问题在哪里，可以很快入手解决对应的问题。

1）合并JS文件：Combine external JavaScript（总共有29个可以压缩的JS文件）2）There are multiple resources served from same domain. Consider combining them into as few files as possible.一个域名有多个文件，可以考虑将他们压缩为尽可能少的文件。  
3）

![1240][]

4）启用gzip压缩：Enable gzip compression5）Compressing the following resources with gzip could reduce their transfer size by about two thirds (~715 B).启用gzip压缩降低传输大小。

![1240 1][]

image\_thumb26\_thumb

6）

![1240 2][]

image\_thumb29\_thumb

7）浏览器缓存：Leverage browser caching 8）The following resources are missing a cache expiration. Resources that do not specify an expiration may not be cached by browsers。资源没有指定过期时间，浏览器可能不会缓存。

![1240 3][]

网页性能部分1）优化样式和脚本的顺序：Optimize the order of styles and scripts (4)  
2）把CSS放到head中：Put CSS in the document head (3)CSS in the document body adversely impacts rendering performance.  
3）删除没用的CSS：Remove unused CSS rules (44)44 rules (19%) of CSS not used by the current page.  
4）Use normal CSS property names instead of vendor-prefixed ones (3)  
应用：自己Css代码的审核；下载复制别人代码，去除无用的Css样式。可以使用FireFox的Dust-Me selectors去除无用的Css样式。  
八.Console  
1.console.log  
大家都会用log，但鲜有人很好地利用console.error , console.warn 等将输出到控制台的信息进行分类整理。他们功能区别不大，意义在于将输出到控制台的信息进行归类，或者说让它们更语义化。各个所代表的语义如下：  
console.log：普通信息console.info：提示类信息console.error：错误信息console.warn：警示信息

当合理使用上述log方法后，可以很方便地在控制台选择查看特定类型的信息。

![1240 4][]

image\_thumb33\_thumb

如果再配合console.group 与console.groupEnd，可以将这种分类管理的思想发挥到极致。这适合于在开发一个规模很大模块很多很复杂的Web APP时，将各自的log信息分组到以各自命名空间为名称的组里面。

![1240 5][]

image\_thumb37\_thumb

console.log第一个参数可以包含一些格式化的指令比如%c，给hello word加了很炫的样式（全是纯CSS用来控制样式的）：

![1240 6][]

如果还不够过瘾，那咱们来log一些图片:

![strip][]

jdfw\_thumb5\_thumb1

除此，console.table 更是直接以表格的形式将数据输出，不能赞得太多！  
var data = \[\{'品名': 'X', '数量': 4\}, \{'品名': 'Y', '数量': 3\}\];console.table(data);

![1240 7][]

image\_thumb41\_thumb

2.console.assert  
当你想代码满足某些条件时才输出信息到控制台，那么你大可不必写if或者三元表达式来达到目的，cosole.assert便是这样场景下一种很好的工具，它会先对传入的表达式进行断言，只有表达式为假时才输出相应信息到控制台。

![1240 8][]

image\_thumb45\_thumb

3.console.count  
除了条件输出的场景，还有常见的场景是计数。当你想统计某段代码执行了多少次时也大可不必自己去写相关逻辑，内置的console.count可以很地胜任这样的任务。

![1240 9][]

image\_thumb50\_thumb

4.console.dir  
将DOM结点以JavaScript对象的形式输出到控制台而console.log是直接将该DOM结点以DOM树的结构进行输出，与在元素审查时看到的结构是一致的。不同的展现形式，同样的优雅，各种体位任君选择反正就是方便与体贴。

![1240 10][]

image\_thumb63\_thumb

5.console.time & console.timeEnd  
输出一些调试信息是控制台最常用的功能，当然，它的功能远不止于此。当做一些性能测试时，同样可以在这里很方便地进行。比如需要考量一段代码执行的耗时情况时，可以用console.time与 console.timeEnd来做此事。  
这里借用官方文档的例子：

![1240 11][]

image\_thumb60\_thumb

当然，我们也可以选择自己写代码来计时：

![1240 12][]

image\_thumb59\_thumb

6.console.profile & console.timeLime  
当想要查看CPU使用相关的信息时，可以使用console.profile配合 console.profileEnd来完成这个需求。这一功能可以通过UI界面来完成，Chrome 开发者工具里面有个tab便是Profile。  
与此类似的功能还有console.timeLine配合 console.timeLineEnd,它的作用是开始记录一段时间轴，同样可以通过Chrome开发者工具里的Timeline 标签来进行相应操作。  
所以在我看来这两个方法有点鸡肋，因为都可以通过操作界面来完成。但至少他提供了一种命令行方式的交互，还是多了种姿势供选择吧。  
7.console.trace  
堆栈跟踪相关的调试可以使用console.trace。这个同样可以通过UI界面完成。当代码被打断点后，可以在Call Stack面板中查看相关堆栈信息。  
上面介绍的都是挂在window.console这个对象下面的方法，统称为Console API，接下来的这些方法确切地说应该叫命令，是Chrome内置提供，在控制台中使用的，他们统称为Command Line API。  
$  
似乎美刀总是被程序员及各种编程语言所青睐「你看看PHP代码就知道PHPer有多爱钱了」，在Chrome的控制台里，用处还真是蛮多且方便的。用处还真是蛮多且方便的。 \_命令返回最近一次表达式执行的结果，功能跟按向上的方向键再回车是一样的，但它可以做为一个变量使用在你接下来的表达式中：

上面的需要领悟其奥义才能使用得当，而需要领悟其奥义才能使用得当，而0~4则代表了最近5个你选择过的DOM节点。什么意思？在页面右击选择审查元素，然后在弹出来的DOM结点树上面随便点选，这些被点过的节点会被记录下来，而4则代表了最近5个你选择过的DOM节点。什么意思？在页面右击选择审查元素，然后在弹出来的DOM结点树上面随便点选，这些被点过的节点会被记录下来，而0会返回最近一次点选的DOM结点，以此类推，$1返回的是上上次点选的DOM节点，最多保存了5个，如果不够5个，则返回undefined。

另外值得一赞的是，Chrome 控制台中原生支持类jQuery的选择器，也就是说你可以用$加上熟悉的css选择器来选择DOM节点

(selector)返回的是满足选择条件的首个DOM元素。剥去她伪善的外衣，其实(selector)返回的是满足选择条件的首个DOM元素。剥去她伪善的外衣，其实 (selector)是原生JavaScript document.querySelector() 的封装。  
同时另一个命令$$(selector)返回的是所有满足选择条件的元素的一个集合，是对document.querySelectorAll() 的封装。

copy

通过此命令可以将在控制台获取到的内容复制到剪贴板。

copy(document.body);

keys & values  
这是一对基友。前者返回传入对象所有属性名组成的数据，后者返回所有属性值组成的数组。具体请看下面的例子：

![1240 13][]

image\_thumb71\_thumb

monitor & unmonitor  
monitor(function)，它接收一个函数名作为参数，比如function a,每次a被执行了，都会在控制台输出一条信息，里面包含了函数的名称a及执行时所传入的参数。  
而unmonitor(function)便是用来停止这一监听。

![strip 1][]

jdfw\_thumb11\_thumb1

debug & undebug  
debug同样也是接收一个函数名作为参数。当该函数执行时自动断下来以供调试，类似于在该函数的入口处打了个断点，可以通过debugger来做到，同时也可以通过在Chrome开发者工具里找到相应源码然后手动打断点。而undebug 则是解除该断点。  
而其他还有好些命令则让人没有说的欲望，因为好些都可以通过Chrome开发者工具的UI界面来操作并且比用在控制台输入要方便。

移动设备模式  
现在很多的网页都要适配移动端，Chrome的移动设备模式对开发者来说无疑是一个很大的惊喜。  
点击手机图标，可以模拟各种各样的移动设备

![1240 14][]

image\_thumb7\_thumb

拖动模拟屏幕的标记的两块东西能任意调节设备屏幕大小  
顶部橙色部分的选项，这个是选择各种要模拟的设备  
下面的是当前设备的显示屏像素

![1240 15][]

image\_thumb1

去掉前面的勾，或者点击这个删除的按钮，网页将会回到你现在的浏览器显示大小

![1240 16][]

image\_thumb2\[1\]

点这个还能快速切换横屏竖屏

![1240 17][]

image\_thumb3

这个是当前模拟的设备的像素比，例如：iPhone3GS是1、iphone4是2、iPhone6是3....

![1240 18][]

image\_thumb4

如果你在操作的时候遇到这个警告，那么你需要刷新下网页才能看到实际的显示效果

![1240 19][]

image\_thumb6

这里的这个Fit是如果你选择的模拟设备像素的显示范围超过了你的浏览器框框，那么就会根据你当前的显示器高度和宽度自适应的缩放显示比例。去掉勾选就是实际像素的显示了。

![1240 20][]

image\_thumb7\[1\]

然后我们来看看右边蓝色的部分 第一个Network是用来模拟网络环境的。你可以模拟各种网络环境以测试网页的加载速度，甚至可以模拟断网的状态...

![1240 21][]

image\_thumb8\_thumb

移动设备模式暂时就介绍到这里。

[http_www.emmet.io]: http://www.emmet.io/
[https_jsonformatter.curiousconcept.com]: https://jsonformatter.curiousconcept.com/
[http_tool.oschina.net_jscompress]: http://tool.oschina.net/jscompress
[http_tool.css-js.com]: http://tool.css-js.com/
[http_www.smashingmagazine.com_2012_06_12_javascript-profiling-chrome-developer-tools]: http://www.smashingmagazine.com/2012/06/12/javascript-profiling-chrome-developer-tools/
[http_study.163.com]: http://study.163.com/
[1240]: /images/20220616/aee9501f581644868ee3a50d2aad8321.png
[1240 1]: /images/20220616/d6fc1f89b38b4c16be8f45feff1950b1.png
[1240 2]: /images/20220616/a15915d8324f42b2b74132d8ca057c66.png
[1240 3]: /images/20220616/0f2f102d053d46b1ae209cb8906421b5.png
[1240 4]: /images/20220616/adc2e0055a474ce4baf468957237b858.png
[1240 5]: /images/20220616/8180066201734f58ab21463543b30889.png
[1240 6]: /images/20220616/00c0aa06a4bf46ddb1a4c7540ae2bd36.png
[strip]: /images/20220616/23f9ed8d84bc4296a840750b8a2bcefb.png
[1240 7]: /images/20220616/87f69c1b9324459599e9da15bbb676af.png
[1240 8]: /images/20220616/2c098f9a2e2e40cb8a899106daab7f2c.png
[1240 9]: /images/20220616/0d0d1e123bda4e0e90a5fdc67ec1c027.png
[1240 10]: /images/20220616/6f79bfb1ba894205946f7ab8399174b9.png
[1240 11]: /images/20220616/86df704b384c46088419d5aa0f58fe65.png
[1240 12]: /images/20220616/c23a32e48e7a41bc85678fee2f740538.png
[1240 13]: /images/20220616/13a0460a299c42669a1ab852c4f0dec1.png
[strip 1]: /images/20220616/8cca8470ad22484291d56c481d132482.png
[1240 14]: /images/20220616/71f141fd3d5d404ea28019a1ea9d1322.png
[1240 15]: /images/20220616/0e5b53a9080e4eeba1e085169c192c19.png
[1240 16]: /images/20220616/9c3375b2ed3b43a193c071a7ba406e26.png
[1240 17]: /images/20220616/60d273ae9b33451e8d9f9883a5aea879.png
[1240 18]: /images/20220616/5c335a5575e44380af81a4afd1e24007.png
[1240 19]: /images/20220616/c6a115216dc143fe92073ffd21e13c4d.png
[1240 20]: /images/20220616/aca77e79e652456ab18e7d99bc5c4ff2.png
[1240 21]: /images/20220616/782560518dba4025838a95994c6a117a.png