Chrome开发者工具使用小技巧

转

Chrome开发者工具使用小技巧

2018年04月20日 10:47:36 蔡俊锋 阅读数：143 标签： Chrome开发工具使用技巧前端 更多

我的分类： 开发技巧工具前端

 

正所谓不用Chrome的开发者不合格，不晓得Chrome开发者工具进行web调试也不是合格的web开发者。因此本文总结了Chrome开发者工具使用的一些小技巧。

一：首先来讲下如何打开开发者工具吧：

1.  
   a.直接在页面上点击右键，而后选择审查元素或者检查；
2.  
   b.打开浏览器工具下的开发者工具；
3.  
   c.直接F12键；
4.  
   d.快捷键Command + Option+I（Ctrl+Shift+I）打开。

• 1
• 2
• 3
• 4
• 5

打开后咱们看到的界面大概以下： 

二：Chrome开发者工具结构

1.Elements

1.  
   容许咱们从浏览器的角度看页面，也就是说咱们能够看到chrome渲染页面所须要的的HTML、CSS和DOM(Document Object Model)对象。此外，还能够编辑这些内容更改页面显示效果。
2.  
   在Elements下点击左上方小箭头能够指定页面元素对应相应代码；

• 1
• 2
• 3

点击元素右键对元素进行监听

2.Network

能够看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，固然也能看到哪些资源不能成功加载。此外，还能够查看HTTP的请求头，返回内容等；

• 1
• 2

3.Sources

主要用来调试js或者修改样式表啥的，主要是修改编辑源文件吧；

• 1
• 2

4.Timeline

提供了加载页面时花费时间的完整分析，全部事件，从下载资源处处理Javascript，计算CSS样式等花费的时间都展现在Timeline中；

• 1
• 2

5.Profiles

分析web应用或者页面的执行时间以及内存使用状况；

• 1
• 2

6.Resources

对本地缓存（IndexedDB、Web SQL、Cookie、应用程序缓存、Web Storage）中的数据进行确认及编辑；

• 1
• 2

7.Audits

分析页面加载的过程，进而提供减小页面加载时间、提高响应速度的方案；

• 1
• 2

8.Console

显示各类警告与错误信息，而且提供了shell用来和文档、开发者工具交互，在调试js代码很重要。

• 1
• 2

三：Workspace工具

是一个能够在开发者工具中调试修改js或者css同时自动保存文件的工具，可以避免开发人员在工具中调试好，再在编辑器中修改一次代码的重复操做，提升效率。把文件添加到workspace中修改的方法：

• 1
• 2

1. 打开开发者工具（F12），切换到Sources选项卡==》在须要编辑的资源文件下右键选择 『Add Folder to Workspace』==》选择源文件所在文件夹，当弹出提示时，选择容许==》在Chrome的Source面板右键选择须要编辑的源文件，选择“Map to a Network Resource”
2. 打开开发者工具（F12），点击右下角的设置按钮==》选择 Workspace, 而后选择 Add folder==》选择源文件所在文件夹，当弹出提示时，选择容许==》在Chrome的Source面板右键选择须要编辑的源文件，选择“Map to a Network Resource”
3. 这样在Chrome的调试工具里面编辑该源文件，或者直接修改css样式（对于css文件），再用Ctrl+S保存，这样修改的代码就自动保存到本地文件中了。

四：代码格式化

有不少css/js的代码都会被 minify 掉，你能够点击代码窗口左下角的那个 { }  标签，chrome会帮你给格式化掉。

• 1
• 2

四：强制dom状态 
有些HTML的DOM是有状态的，好比a 标签，其会有 active，hover， focus，visited这些状态，有时候，咱们的CSS会来定关不一样状态的样式，在分析网页查看网页上DOM的CSS样式时，咱们能够点击CSS样式上的 :hov 这个小按钮来强制这个DOM的状态。 

五：动画

如今的网页上都会有一些动画效果。在Chrome的开发者工具中，经过右上角的菜单中的 More Tools => Animations 呼出相关的选项卡。因而你就能够慢动做播放动画了（能够点选 25% 或 10%），而后，Chrome还能够帮你把动画录下来，你能够拉动动再画的过程，甚至能够作一些简单的修改。 

• 1
• 2

六：颜色取色和选择

咱们能够在网页中获取某元素字体颜色或者背景颜色等，只须要点击该元素颜色那个框框那里就会弹出颜色取色器，进行颜色选择和查看，以下：

• 1
• 2

七：Sources中的调试

1.断点调试

这一步就是打开文件，在任意一行的行号，点击就会出现一个断点！

• 1
• 2

2.debugger调试

你们可能看到，上图红框的按钮，我按照编号简单说下： 
a.中止当前的断点调试 
b.继续执行下一行代码，（1.这个方式不会进入函数，2.这个方式快捷键是f10） 
c.跳入函数中去（这个方式快捷键是f11） 
d.跳出当前的函数 
e.禁用全部的断点，中止任何调试 
f.程序运行时遇到异常时是否中断调试

八：application中的缓存和文件

1. cookie
2. localstorage和localsession
3. 缓存（Cache Storage）
4. indexedDB
5. Frames（页面上的资源包括fonts，images，js文件，css文件等）。

---

以上就是Chrome开发者工具一些基本常见的操做或者小技巧