提高开发效率的 Chrome 开发者工具高端使用技巧(一)
工欲善其事必先利其器，Chrome 浏览器应该算是前端开发人员最常用的工具了，本期带来一些很实用的 Chrome 浏览器调试方法，这些调试方式可以从性能，逻辑，布局，交互等等方面帮助和提高开发效率。
以下快捷键部分均是在 MacBook 硬件环境下，Windows 系统下请自行更正部分快捷键
更多文章在我的 Github 及个人公众号【全栈道路】上，欢迎观赏【一个不知名的足球狗的前端知识点】，如有受益，不要钱，小手点个Star。
如何打开 Chrome Devtool
- 在 Chrome 菜单中选择 更多工具 > 开发者工具
- 在页面元素上右键点击，选择 ‘检查’
- 使用 快捷键
Ctrl+Shift+I (Windows)或Cmd+Opt+I (Mac)
你真的了解 Chrome Devtool 的工具栏吗
Chrome devtool 包含有很丰富的功能，工具栏上的功能分别为以下几类
- 设备模式
- 测试响应式和设备特定的视口
- 模拟移动设备
- 仿真传感器：地理定位和加速度计
Elements- 页面dom元素面板- 检查和调整页面
- 编辑样式
- 编辑DOM
Console- 控制台面板Sources- 源代码面板- 断点调试
- 调试混淆代码
Network- 网络面板- 资源时间轴
- 网络带宽
Performance- 设备加载性能分析面板Memory- 内存面板Application- 应用信息面板，PWA/Storage/Cache/FramesSecurity- 安全分析面板Audits- 自动化测试工具
用好Chrome Devtools
呼出快捷面板: cmd + shift + p
- 在
Devtools打开的情况下，键入cmd + shift + p将其激活，然后开始在栏中键入要查找的命令或输入?号以查看所有可用命令...: 打开文件:: 前往文件@：前往标识符(函数，类名等)!: 运行脚本文件>: 打开某菜单功能
自带屏幕截图：> screen
- 包含 区域截图，整屏截图，节点截图，屏幕捕获功能
性能监视器：> performance monitor
检查无用的css/js
- 这个功能帮助你检查页面上 CSS/JS 没有用到的比例，没有用到的用红色表示，用到的用绿色表示。
- 打开方式: 工具栏
more tools => Coverage标签，然后点击记录按钮，刷新页面，页面加载完成之后单击停止，就会显示页面的代码占比。
花式 console
congsole.log()、console.error()、console.warn()、console.info()常规打印数据信息
console.table()表格形式打印复杂的数据结构console.group()、console.groupEnd()分组打印信息console.assert()条件打印console.dir()递归打印对象的所有属性console.trace()追踪函数的调用轨迹- 带样式打印
伪类伪元素调试
查看 DOM 节点绑定事件
善用 network 过滤器
模拟断网进行错误处理
- 模拟不同网络速度下页面的展示情况
检查内存泄漏
- 只要存在一个引用就不会进行GC回收，有些DOM节点没有 append 到 DOM ，但是存在引用指向它，它就是一个分离的DOM的结点。这个时候就发生了 DOM 内存泄漏。这个时候拍一张内存堆的快照，Chrome 会帮我们把这些分离 DOM 结点用黄色标注出来。
- 打开方式:
Memory => profiles
查看内存消耗
- 查看某个操作内存消耗情况，可以使用 Record Allocation 功能进行记录。
- 打开方式:
Memory => profiles => ALLOCATION TIMELINES, 点击开始记录后，操作完成单击停止，就会出现使用情况分析。
Scroll Into View 滚动至 DOM 位置
DOM 断点测试
重新发送 XHR 请求
浏览器并发请求数量问题
- 基于端口数量和线程切换开销的考虑,浏览器不可能无限量的并发请求
- 浏览器并发请求数量问题并非越大越好，各大浏览器厂商基于良知和默契的考虑，为保护浏览器和服务器更好的性能，制定了自家的并发请求数量标准。
- 当然并发请求数量不是不可更改的，迅雷、暴风影音等可以修改电脑的最大连接数，从而达到下载或请求的最高效率。
- 部分浏览器还可以重写浏览器的默认值，比如 IE浏览器
- 目前浏览器的最大同域并发请求数量
| Browser | Max |
|---|---|
| IE8,9 | 6 |
| Firefox | 6 |
| Chrome | 6 |
- 针对最大并发请求数量的问题，现在已有解决方案，大致分为以下几类，这里不作特别讲解，有想了解的同学可以自行点击链接查看。
- 解决方式分类: domain hash, cookie free, css sprites, js/css combine, max expires time, loading images on demand
写在最后
如果你觉得这篇文章对你有益，烦请点赞以及分享给更多需要的人！
欢迎关注【全栈道路】及微信公众号【全栈道路】，获取更多好文及免费书籍！
有需要【百度】&【字节跳动】&【京东】&【猿辅导】内推的也请留言哦，你将享受VIP级极速内推服务~
往期好文
[万字长文]百度和好未来面试经含答案
[前端面试]前端缓存问题看这篇，让面试官爱上你
记一次惨痛的Vue-cli + VueX + SSR经历
[三分钟小文]前端性能优化-HTML、CSS、JS部分
[三分钟小文]前端性能优化-页面加载速度优化
[三分钟小文]前端性能优化-网络传输层优化
提高开发效率的 Chrome 开发者工具高端使用技巧(一)相关推荐
- 提升开发效率的 Chrome 开发者工具快捷键参考
文章出自个人博客 https://knightyun.github.io/2020/05/23/tools-devtool-shortcut,转载请申明 本文只介绍 Chrome 一些主要和常用的快捷 ...
- Chrome 开发者工具的各种骚技巧
点击蓝色"程序猿DD"关注我 回复"资源"获取独家整理的学习资料! 作者 | 老姚 来源 | http://rrd.me/enqVF 对于每个前端从业者来说,除 ...
- 学习前端开发，可提高Web开发效率的15类工具
Web的发展日新月异,这也使得Web开发者不得不加快脚步,学习新的技术和编程语言.尤其是对于那些大量流量入口的网站来说,跟上技术发展趋势更是尤为重要.为了使得Web开发人员能够更加专注于业务层面的开发 ...
- 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
引言 Google Chrome 是由 Goole 公司开发的一款网页浏览器,自 2008 年 9 月第一个测试版本发布以来,其市场占有率逐步上升,至 2014 年 5 月,Chrome 已超越 Fi ...
- 开发人员提高开发效率的10个推荐工具
推荐10个能够提高开发人员开发效率的10个工具 腾讯云开发CloudBase 云开发(Tencent CloudBase,TCB): Cloud Base是腾讯云提供的云原生一体化开发环境和工具平台, ...
- IDEA工具开发必备设置-极大提高开发效率
IDEA工具开发必备设置-极大提高开发效率 热部署设置 mybatis编写sql语句自动提示功能 自动清除无效 import 常用快捷键 全局UTF-8编码设置 最后 热部署设置 在开发中我们经常会修 ...
- Chrome 开发者工具的Timeline和Profiles提高Web应用程序的性能[转]
我们都希望创建高性能的Web应用程序.由于我们的应用程序变得越来越复杂,我们可能想要支持丰富的画面以及理想的60帧/秒,这能保证我们的应用程序响应灵敏且生动流畅. 知道如何衡量和提高性能,是一个有用的 ...
- 提高 Linux 开发效率的 5 个工具
提高 Linux 开发效率的 5 个工具 我们经常需要长时间地坐在电脑前做一项具体的工作只为能够优化工作流程.这包括选择和配置能让你最高效工作的工具.从长远来看,简单易学的工具并不总是好的,那些能够充 ...
- 这5个可以提高前端开发效率的 Chrome扩展程序，建议你尝鲜体验下
扩展程序是个性化的小程序,可以为你的浏览器添加新功能.你可以通过 Chrome 应用商店添加扩展程序来定制 Chrome 使用体验. 以下是我用来保持专注和提高开发效率的五个 Chrome 扩展程序: ...
- SAP UI5 应用开发教程之三十八 - 使用 Chrome 开发者工具查看程序执行出错时的上下文信息
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
最新文章
- 贪心算法简单实践 -- 分糖果、钱币找零、最多区间覆盖、哈夫曼编解码
- 操作系统原理第十一章：大容量存储
- 让你的silverlight更炫（三）：让BusyIndicator更炫
- how to request a curl operation from alibaba cloud
- Pwn环境配置（三）——ubuntu环境搭建（新）
- EWSN 2019 （待续）
- 在Maven+Spring项目中使用Node.js的Gulp进行前端自动化构建
- python控制多台手机,用python同时启动多个appium,并让多个手机同时执行脚本
- Python 3.65 安装geopandas
- Android架构MVC,MVP与MVVM及MVPVM对比分析
- 上银驱动器使用手册_上银伺服电机调试说明书PPT课件
- Element-UI下拉框el-select实现拼音搜索
- 新茶饮的尽头是瓶装水？
- RGB彩色空间和YIQ、灰度等的转化
- 操作系统-逻辑地址转换为物理地址Java实现
- Gartner 发布2022年新兴技术成熟度曲线
- 各个认证记录及说明SRRC与CTA认证
- java画笑脸_canvas 画笑脸
- html实现从内向外渐变色,CSS3 由内到外(放射性)渐变
- S3DIS场景点云数据集