名字起得有点奇怪, 但是没关系. 我只是随便起的.
孔子约: 工欲善其事, 必先利其器.
老子也约过: 孔子说得对!
所以对前端 er 来说, 熟练掌握浏览器调试工具是性能优化的必备条件.
首先我们得知道如何打开 Chrome 调试工具.
你可以鼠标右键, 选择审查元素 (Inspect Element) 或者使用快捷键(I).
接下来我们先简要介绍一下 Chrome 调试工具各个工具的作用.
Element
Elements 板块你可以看到整个页面的 Dom 结构. 你可以在这里编辑 html, 查看元素 CSS, 查找元素等等.
Network
这个板块, 你可以查看页面所加载的所有资源响应情况, 响应时间, 浏览器等待时间, 状态码, MINE Type, 资源大小等.
Sources
Sources 就是所有资源了, 你可以看到页面加载的资源, 图片, css,js 等, 它们会按照资源的来源分类.
Timeline
跟前面的工具相比, Timeline 就高级很多了. 它可以让你查看浏览器的渲染流程. 解析代码, 布局, 绘制, 合并渲染层. 了解更多, 查看之前的文章浏览器渲染流程
Profiles
Profiles 工具主要是用来检测 CPU 占用程度, 堆栈申请的内存.
Resources
Resources 工具显示资源的, 跟 Sources 不同的是, 它会对文档类型分类. 并且它可以查看, 增加, 删除, 修改页面 LocalStorage,SessionStorage,Cookies 等等.
Audits
Audits 工具非常智能, 它会告诉你如何优化页面, 告诉你应该合并 CSS,JS, 应该明确图片的大小, 以及某个 css 文件中 unused CSS 的百分比等.
Console
Console 应该都很熟悉了吧? 经常会以为少写了'}'而报语法错误. 当然它的功能远不止这些. 点击这里查看更多
奇淫技
隐藏的刷新按钮, 在开发者工具打开的情况下, 长按左上角的刷新按钮, 会出现多种加载选项.
可以保存修改, Source 面板下的文件是可以修改并且支持版本回退的. 打开一个文件, 进行编辑, 保存. 右键打开 Local Modifications, 你可以看到保存记录, 你可以选择回退, 到某个时间点. 你也可以另存为~
保存, 回退
css 选择器, Elements 工具中的选择器, 支持 css 选择器
支持 css 选择器
jQuery 语法, Console 工具支持 jQuery 语法, 选中后, 你还可以右键选择 Reveal In Elements Panel, 跳回 Element 工具.
支持 jQuery 语法
查看使用字体, Elements 工具右侧 css 模块, 最底部可以看到某个元素最终具体使用的字体.
某个元素最终具体使用的字体
setting,devtools 中的 setting, 支持在 DevTools 打开时强制清除缓存, 记录 AJAX, 打开 source map, 增删改模拟器等等.
devtools 中的 setting
Add Folder to Workspace, 在 Source 面板下, 右键选择 Add Folder to Workspace, 之后就可以直接编辑该目录下的任何文件.
Add Folder to Workspace
Source 下的 Snippets, 可以让你想保存小段的脚本, 书签或是你在浏览器中调试时经常用到的代码, 都可以使用 Snippets, 你可以在 Source 面板里创建, 存储和运行这些 Snippets.
Snippets
12 月 15 更新
Scroll Into View, 滚动浏览器到元素所处位置
Scroll Into View
Snippets, 这里有很多实用的 Snippets, 比如运行 allcolors.js, 你可以列出当前页面所有颜色值.
Snippets
来源: http://www.qdfuns.com/article/14464/2a039d2d19fc5afa624863faf9ad2c21.html