欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

Chrome 调试工具奇淫技_html/css_WEB-ITnose

程序员文章站 2022-06-02 07:57:48
...
孔子约:工欲善其事,必先利其器。老子也约过:孔子说得对!

所以对前端er来说,熟练掌握浏览器调试工具是性能优化的必备条件。

首先我们得知道如何打开Chrome调试工具。

你可以鼠标右键,选择审查元素(Inspect Element)或者使用快捷键(⌥⌘I)。

Element

接下来我们先简要介绍一下Chrome调试工具各个工具的作用。

Element

Elements板块你可以看到整个页面的Dom结构。你可以在这里编辑HTML,查看元素CSS,查找元素等等。

Network

这个板块,你可以查看页面所加载的所有资源响应情况,响应时间,浏览器等待时间,状态码,MINE Type,资源大小等。

Sources

Sources就是所有资源了,你可以看到页面加载的资源,图片,css,js等,它们会按照资源的来源分类。

Timeline

跟前面的工具相比,Timeline就高级很多了。它可以让你查看浏览器的渲染流程。解析代码,布局,绘制,合并渲染层。了解更多,查看之前的文章 浏览器渲染流程

Profiles

Profiles工具主要是用来检测CPU占用程度,堆栈申请的内存。

Resources

Resources工具显示资源的,跟Sources不同的是,它会对文档类型分类。并且它可以查看,增加,删除,修改页面LocalStorage,SessionStorage,Cookies等等。

Audits

Audits工具非常智能,它会告诉你如何优化页面,告诉你应该合并CSS,JS,应该明确图片的大小,以及某个css文件中unused CSS的百分比等。

Console

Console应该都很熟悉了吧?经常会以为少写了’}’而报语法错误。当然它的功能远不止这些。 点击这里 查看更多

奇淫技

  • 隐藏的刷新按钮,在开发者工具打开的情况下,长按左上角的刷新按钮,会出现多种加载选项。

    刷新按钮

  • 可以保存修改,Source面板下的文件是可以修改并且支持版本回退的。打开一个文件,进行编辑,保存。右键打开Local Modifications,你可以看到保存记录,你可以选择回退,到某个时间点。你也可以另存为~

    保存,回退

  • css选择器,Elements工具中的选择器,支持css选择器

    支持css选择器

  • jQuery语法,Console工具 支持 jQuery语法,选中后,你还可以右键选择Reveal In Elements Panel,跳回Element工具。

    `支持`jQuery语法

  • 查看使用字体,Elements工具右侧css模块,最底部可以看到某个元素最终具体使用的字体。

    某个元素最终具体使用的字体

  • setting,devtools中的setting,支持在DevTools打开时强制清除缓存,记录AJAX,打开source map,增删改模拟器等等。

    devtools中的setting

  • Add Folder to Workspace,在Source面板下,右键选择Add Folder to Workspace,之后就可以直接编辑该目录下的任何文件。

    Add Folder to Workspace

  • Source下的Snippets,可以让你想保存小段的脚本、书签或是你在浏览器中调试时经常用到的代码,都可以使用Snippets,你可以在Source面板里创建、存储和运行这些Snippets。

    Snippets

12月15更新

  • Scroll Into View,滚动浏览器到元素所处位置

    Scroll Into View

  • Snippets, 这里 有很多实用的Snippets,比如运行allcolors.js,你可以列出当前页面所有颜色值。

    Snippets

  • 调试sass,通过工具生成sourcemap以及Chrome的一点设置,你可以调试sass,coffeescript,并且实时保存。 相关文章: Working with CSS Preprocessors , Developing With Sass and Chrome DevTools

    调试sass

  • $0,$_ 打印,Element面板选中标签

    $0,$_ 打印

    在Console面板,可以使用 $0 或者 $_ 快速将它打印出来

    快速将它打印出来

  • Console更多功能,Console面板还有很多功能,比如 console.error , console.group , console.time 。 自行查阅API

console.group合并输出

添加样式

  • Chrome Dev开发者选项,浏览器进入 chrome://flags ,你会看到很多浏览器很多隐藏功能,启用开发者工具实验。

    chrome://flags

    然后再进入设置,你会看到新增加了很多开发者选项。

    开发者选项

    打开Layer面板,可以让你看到页面中的复合层。(查找页面原因的时候非常有用)

    打开Layer面板

  • 查看页面响应式断点,打开模拟器,在左上角有个按钮,单击它,你能看到页面中的响应式断点。

    查看页面响应式断点

总结

这篇文章的内容到此为止算是完结了,总结的过程也重新复习了一遍操作。虽然这些技能可能都算不上什么特殊技巧,掌握它们,也不会让你瞬间变得有多强大。但是熟悉它们,善用它们,可能会让你在某些场合,省下大量时间去喝杯咖啡。

稿源: w3ctrain