Chrome开发者工具使用小技巧
正所谓不用Chrome的开发者不合格，不晓得Chrome开发者工具进行web调试也不是合格的web开发者。所以本文总结了Chrome开发者工具使用的一些小技巧。
一：首先来说下如何打开开发者工具吧：
a.直接在页面上点击右键，然后选择审查元素或者检查；
b.打开浏览器工具下的开发者工具；
c.直接F12键；
d.快捷键Command + Option+I（Ctrl+Shift+I）打开。
- 1
- 2
- 3
- 4
- 5
打开后我们看到的界面大概如下：
二：Chrome开发者工具结构
1.Elements
允许我们从浏览器的角度看页面，也就是说我们可以看到chrome渲染页面所需要的的HTML、CSS和DOM(Document Object Model)对象。此外，还可以编辑这些内容更改页面显示效果。
在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
- 打开开发者工具（F12），切换到Sources选项卡==》在需要编辑的资源文件下右键选择 『Add Folder to Workspace』==》选择源文件所在文件夹，当弹出提示时，选择允许==》在Chrome的Source面板右键选择需要编辑的源文件，选择“Map to a Network Resource”
- 打开开发者工具（F12），点击右下角的设置按钮==》选择 Workspace, 然后选择 Add folder==》选择源文件所在文件夹，当弹出提示时，选择允许==》在Chrome的Source面板右键选择需要编辑的源文件，选择“Map to a Network Resource”
- 这样在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中的缓存和文件
- cookie
- localstorage和localsession
- 缓存（Cache Storage）
- indexedDB
- Frames（页面上的资源包括fonts，images，js文件，css文件等）。
以上就是Chrome开发者工具一些基本常见的操作或者小技巧
Chrome开发者工具使用小技巧相关推荐
- CHROME开发者工具的小技巧
Chrome的开发者工具是个很强大的东西,相信程序员们都不会陌生,不过有些小功能可能并不为大众所知,所以,写下这篇文章罗列一下可能你所不知道的功能,有的功能可能会比较实用,有的则不一定,也欢迎大家补充 ...
- Chrome 开发者工具的小技巧
来源:陈皓 - 酷壳 CoolShell :链接:https://coolshell.cn/articles/17634.html Chrome的开发者工具是个很强大的东西,相信程序员们都不会陌生,不 ...
- Chrome 35个开发者工具的小技巧
谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器.伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chrome变成了一个必须的工具.大多数可能熟悉关于chorme的许多特点,例如使用c ...
- chrome开发者工具各种骚技巧
作者:老姚 链接:https://juejin.im/post/5af53823f265da0b75282b0f 对于每个前端从业者来说,除了F5键之外,用的最多的另外一个键就是F12了.最近大神(@ ...
- Chrome 开发者工具各种骚技巧
点击上方的终端研发部,右上角选择"设为星标" 作者:老姚 链接:https://juejin.cn/post/6844903604839514125 前言 对于每个前端从业者来说, ...
- Jerry和您聊聊Chrome开发者工具
Chrome开发者工具是Jerry日常工作使用的三大调试器之一.虽然工具名称前面带了个"开发者", 但是它对非开发人员仍然有用.不信? 用Chrome打开我们常用的网站,按F12, ...
- 小技巧：Chrome开发者工具里的Alt+单击
在Chrome开发者工具里单击一个元素左边的小三角符号,只会展开其继承结构的第一层直接子节点: 而Alt+Click,可以将该元素第一个子节点,以及该子节点原型链上的节点全部展开.将下图和上图进行比较 ...
- Chrome开发者工具使用console.trace的一个小技巧
我们在Chrome开发者工具里调试的时候,有时需要把函数执行的调用堆栈信息保存到本地以便进一步处理: 然而Call stack列表下的数据无法复制粘贴. 其实,我们只需要在console控制台里,输入 ...
- chrome开发者工具功能拾遗：Sources面板篇
本文主要介绍一些本人在此之前不甚了解,但经过了解后又发现对自己的工作很有帮助的一些chrome开发者工具调试技巧/功能.也借这篇文章提醒一下自己,在实际项目中多使用这些功能,尽快熟悉起来,提升自己的工 ...
最新文章
- https://www.exploit-db.com/能够成功下载的一个CVE编号
- 2020秋季-人工神经网络课程报告
- 如何在Linux下使用Gitblit工具创建Git仓库服务
- Spring Boot + MyBatis + MySQL读写分离
- 平衡二叉树,AVL树之图解篇
- 李开复：听AI大佬吐槽真实的人工智能
- MongoDB工具最新进展
- STM32工作笔记0015---STEMWIN在STM32F1开发板上的移植
- JBOD RAID0
- springboot mybatis优雅的添加多数据源
- 采用Eclipse中间Maven构建Web项目错误（一）
- 单机魔域显示服务器未启动,魔域单机版_开始游戏
- Windows 10x64 Pro Modified By Michael
- 交通标志牌的检测与识别
- 论文笔记 Dependent Gaussian Processes 相关高斯过程
- dataType和contentType的区别
- 《在细雨中呼喊》---余华 （书摘）
- Mentor PADS铺铜指示器的关闭操作
- dropout原理解析
- 为什么大公司一定要使用微服务？微服务杂谈(1)，推荐学习