chrome调试工具之Elements

格斗家不爱在外太空沉思
771 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第11天，点击查看活动详情

前言

很多程序员都喜欢用谷歌浏览器，因为谷歌浏览器简洁，也没有广告，可以安装许多非常强大的插件等等，但是很多程序员不太会使用谷歌浏览器的调试工具，代码有时候出现问题了就盯着源码找问题，很多人对谷歌浏览器的调试工具非常陌生，关于谷歌浏览器的调试工具有多重要，不会使用这个调试工具就相当于一个厨师做菜不会用刀

Elements

f12打开调试工具，里面提供了非常多信息来帮助我们分析这个页面

image.png

在谷歌浏览器的调试页面里有非常多的选项卡，其中最常用的有:

  1. Elements显示页面代码的窗口
  2. Console浏览器控制台,可以直接在里面写js代码
  3. Socures调试窗口,这里用的最多的就是断点调试了
  4. Network请求窗口,保存所有请求的数据

今天我们自己讲讲Elements

image.png

Elements为我们展示的信息已经足够丰富了，我们可以看到整个页面的元素结构，然后下面还有一些子选项卡

image.png

styles

首先说说styles，它表示我们目前选中元素的当前样式，里面有作者写的样式，浏览器的默认样式，来自于继承的样式

1665453288161.png

在众多样式里有个样式比较特殊，在样式表的第一个叫element.style，表示当前元素的内联样式，就是加在html标签里的style，在里面添加样式，标签里就会多出一个style属性

1665453493923.png

我们还可以进行搜索，添加伪类和class

image.png

Computed

在Computed里可以看到一个盒模型，还可以看到下面有很多样式，点击Show all，这个元素的所有样式都会全部显示出来

image.png

里面的样式是什么他就会显示出来什么，它是不会骗你的，如果样式出问题了就查看Computed

Layout

Layout选项卡主要分析哪些元素用了弹性盒和网格布局的

image.png

Event Listeners

Event Listeners选项卡主要用于某个元素目前的事件监听

image.png

可以点击展开看到点击事件里有多少个监听器，在哪个js文件里进行监听，点击js就跳转到相应源码的位置

image.png

还可以点击灰色的Remove按钮移除事件监听

Properties

Properties选项卡表示对应的DOM对象，为我们带来了什么有用的信息呢？

1665454654620.png

我们可以看到这里有个react，说明这个界面是用react写的

DOM Breakpoints

DOM Breakpoints选项卡可以监听某个元素的变化

我们给body打上一个断点

image.png

对页面进行一些操作，它就会跳到某个js文件里

image.png

总结

好好利用Element和里面的子选项卡，这一个选项卡有时候远比你盯着源代码更能显示出更多的信息,更别说还有其他的选项卡，浏览器插件等等

avatar
文章
阅读
粉丝