这是我参与8月更文挑战的第28天，活动详情查看：8月更文挑战
工欲善其事必先利其器，Chrome 浏览器应该算是前端开发人员最常用的工具了，本期带来一些很实用的 Chrome 浏览器调试方法(第二篇)，第一篇点击这里, 这些调试方式可以从性能，逻辑，布局，交互等等方面帮助和提高开发效率。
以下快捷键部分均是在 MacBook 硬件环境下，Windows 系统下请自行更正部分快捷键。
更多文章在我的 Github 及个人公众号【全栈道路】上，欢迎观赏【一个不知名的足球狗的前端知识点】，如有受益，不要钱，小手点个Star
用好Chrome Devtools
使用 Source Order Viewer 进行更好的可访问性检查
在源顺序查看器显示了元素的顺序在源文件中的定义。使用此功能可以帮助改善使用辅助技术的人的体验。这种顺序类似于 tabindex 对页面元素顺序的影响。
使用 CSS 字体编辑器轻松控制排版
使用 CSS Grid 和 Flexbox 编辑器更好地调试
使用 CSS 概览面板重构和改进您的样式表
创建您自己的键盘快捷键并提高工作效率
检查和调试 CSS 网格
快速更改 CSS 和 HTML 代码中的数值
使用 CSS 概览面板查看 CSS 信息
复制并提取页面上元素的所有 CSS
生成 JavaScript 表达式以获取 DOM 节点
- 文中部分谷歌开发者工具的技巧取自网站umaar.com
写在最后
如果你觉得这篇文章对你有益，烦请点赞以及分享给更多需要的人！
欢迎关注【全栈道路】及微信公众号【全栈道路】，获取更多好文！
有需要【百度】&【字节跳动】&【京东】&【猿辅导】内推的也请留言哦，你将享受VIP级极速内推服务~
