这是我参与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级极速内推服务~