浏览器DevTools-元素调试

为什么我们需要去了解浏览器的devtools?

我们借助Google devTools官方的那句话:

“Chrome 开发者工具是一套直接内置于 Google Chrome 浏览器的 Web 开发者工具。借助开发者工具，您可以即时修改页面和快速诊断问题，从而更快地构建更出色的网站。”

是的, devTools的使用处于我们已经开发了一个网站/页面 我们想要让它变的更好, 更出色, 因而被Goole Chrome内置出来的一个Web开发者工具.

本文也将会从如何对页面中元素和CSS进行调试讲起, 看看除了一些基本简单的调试, 有没有一些我们没有注意到, 但是可以提升我们开发效率的“骚操作尼”?

DOM相关

1. 查看dom元素

查看页面中的元素对应的dom节点

1. 直接右键需要检查的元素
   

2. 使用devtools中箭头
   

开启元素标尺

您可以通过以下两种方式之一启用标尺：

• 按 ++ 或 ++ (Mac) 打开命令菜单，输入 Show rulers on hover，然后按 。Ctrl + Shift +P 或者 Command + Shift + P
• 勾选 Settings > Preferences > Elements > Show rulers on banner （悬停显示标尺）。

搜索内容(可以按照: 节点内容, css选择器, XPath 选择器), 步骤如下:

1. 将光标置于元素面板上。
2. 按 + 或 + (Mac)。 搜索栏会在 DOM 树底部打开, Ctrl+F.
3. 输入 The Moon is a Harsh Mistress。最后一个句子在 DOM 树中突出显示。
   

修改元素

双击或者右键edit

DOM节点重新排序

唤起devtools后, 拖拽即可重新排序

隐藏元素

选中对应元素后, 按H键

使用 $0 引用当前选定的节点

使用特殊变量$0来获取选中的当前节点, 如图:

存储元素为全局变量

右键元素后,进入控制台中, 选择右键选中的元素然后选择 Store as global variable。

2. 查看元素的属性

如图:

CSS相关

CSS相关的调试技巧可以帮助我们快速的对我们开发的元素的状态进行一个定位, 确认或者是修改元素达到我们想要的效果

1. 查看不同状态的元素

点击:hov即可查看元素给定的不同状态的表现

1. 添加和查看元素的类名

点击即可添加

1. flex / grid布局的使用

点击他们的style的右侧部分, 进行调试

点击flex / grid 右边的按钮, 可以直接调试查看效果, 这可以极大提升我们的效率!