chrome浏览器debug

Chrome浏览器审查元素

1.Elements标签页

Elements标签页的左侧就是对页面HTML结构的查看与编辑，你能够直接在某个元素上双击修改元素的属性。

1.Edit as HTML直接对元素的HTML进行编辑，或者删除某个元素，全部的修改都会即时在页面上获得呈现。

2.Copy能够将HTML代码直接复制下来，在拷贝别人网站上面的HTML代码的时候灰常方便，你懂的~~

3.Delete node删掉一个HTML Node

4.Break on能够对某个元素进行监听，在JS对元素的属性或者HTML进行修改的时候，直接触发断点，跳转到对改元素进行修改的JS代码处

Elements标签页的右侧能够对元素的CSS进行查看与编辑修改：

 

2.Network标签页

Network标签页对于分析网站请求的网络状况、查看某一请求的请求头和响应头还有响应内容颇有用。注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示的哦。

点击左侧某一个具体请求URL，能够看到该请求的详细HTTP请求状况：

咱们能够在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息。

1. Headers请求头信息和响应头信息
2. Preview预览结果，若是是文件能够查看这个文件；若是是图片能够预览这个图片；若是是从服务器返回来的JSON数据，能够查看格式话后的JSON
3. Response从服务器返回的响应结果
4. Cookies请求和响应的Cookie
5. Timing具体的响应时间

3.Resources标签页

Resources标签页能够查看到请求的资源状况，包括CSS、JS、图片等的内容。也能够设置各类断点。对存储的内容进行编辑而后保存也会实时的反应到页面上。

 

4.Timeline标签页

注意这个Timeline的标签页不是指网络请求的时间响应状况，这个Timeline指的JS执行时间、页面元素渲染时间

5.Profiles标签页

主要是作性能优化的，包括查看CPU执行时间与内存占用

6.Audits标签页

这个对于优化前端页面、加速网页加载速度颇有用

Google chrome在“开发者工具”中提供了相似 dust-me 的冗余css检测功能。 chrome用户能够在Audits面板内使用这个功能： 选择 Web Page Performance 选框并点击Run，会获得相似以下格式的提示

Remove unused CSS rules (185)35.39KB (51%) of CSS is not used by the current page.> my.release.css: 35.39KB (51%) is not used by the current page.

这里显示了当前页面加载但没有用到的css样式文件和样式名称列表，点击css文件名前的 箭头能够展开获得一个列表。若是冗余内容不多，就能够直接分析一下而后到文件内删掉了。 须要注意的是，这个功能只是分析当前页面，因此不少其余页面须要但当前页没有使用的样式 也会列出。因此须要谨慎操做，彻底肯定了是冗余的样式，再手工清除。

我主要用这个功能去除一些想要借鉴的页面中冗余的css，都是从网站上直接保存来的单独页面。 因此我自制了批量清理工具。

我进行批量清理的步骤（因为Audits会将不少全局css认做unused，故批量清理比较危险，仅做学习使用）：

1.将冗余的css列表保存成keys.txt

2.通常下载来的css都是压缩后的，不方便查看，这里我先将加密的css文件格式化：Replace regexp (default } -> }^J): RET

3.打开 keys.txt 和 须要精简的css文件，在 * scratch * 内使用 C-x C-e 执行如下代码： 因为chrome分析出的结果可能重复，这段小程序使用了cl的去重方法。

(let ((sbuf (get-buffer "style.css")) (kb (get-buffer "keys.txt")) (keys nil)) (set-buffer kb) (goto-char (point-min)) (while (not (eobp)) (push (buffer-substring (point-at-bol) (point-at-eol)) keys) (next-line) ) (set-buffer sbuf) (goto-char (point-min)) (require 'cl) (dolist (x (remove-duplicates keys :test #'equal)) (replace-regexp (concat x "{.*}\n") "") (goto-char (point-min)) )

)

7.Console标签页

就是Javascript控制台了：

在这个面板能够查看错误信息、打印调试信息（console.log()）、写一些测试脚本，还能够看成Javascript API查看用。

console对象提供浏览器控制台的接入，不一样的浏览器工做的方式是不同的，这里介绍一些大都会提供的接口api。

console方法

Console.assert()

判断第一个参数是否为真，false的话抛出异常而且在console输出相应信息。

Console.count()

以参数为标识记录调用的次数，调用时在console打印标识以及调用次数。

Console.debug() 

console.log方法的别称，使用方法能够参考Console.log()

Console.dir()

打印一条以三角形符号开头的语句，能够点击三角展开查看对象的属性。

Console.error()

打印一条错误信息，使用方法能够参考 string substitution。

Console._exception()

error方法的别称，使用方法参考Console.error()

Console.group()

打印树状结构，配合groupCollapsed以及groupEnd方法;

Console.groupCollapsed()

使用方法和group相同，不一样的是groupCollapsed打印出来的内容默认是折叠的。

Console.groupEnd()

结束当前Tree

Console.info()

打印以感叹号字符开始的信息，使用方法和log相同

Console.log()

打印字符串，使用方法比较相似C的printf格式输出，可参考 string substitution 。

Console.profile()

能够以第一个参数为标识，开始javascript执行过程的数据收集。和chrome控制台选项开Profiles比较相似，具体可参考chrome profiles

Console.profileEnd()

配合profile方法，做为数据收集的结束。

Console.table()

将数据打印成表格。Console.table [en-US]

Console.time()

计时器，接受一个参数做为标识。

Console.timeEnd()

接受一个参数做为标识，结束特定的计时器。

Console.trace()

打印stack trace.

Console.warn()

打印一个警告信息，使用方法能够参考 string substitution。