chrome-devtools入门

官方： https://developers.google.cn/web/tools/chrome-devtools/dom

入门指导

chrome浏览器的界面介绍和其配置方式

通过这个文章可以了解基础的界面操作和使用 Chrome DevTools 来改变网页的信息。

如果你想知道 DOM 和 HTML 之间的关系，可以查看附录： HTML versus the DOM。大致就是说，像我们浏览的html代码就是page， 而里面的一个html标签这些就是一个DOM。

查看DOM节点：

在你想知道的地方，点击鼠标右键，弹出右键菜单，点击 Inspect，这个时候会出现DevTools的 Elements 界面， 并且就可以看到当前内容对应的 html 高亮代码。

点击 DevTools 的 Inspect [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z4maw2bn-1582690295087)(./images/inspect.png)]图标。 然后再点击网页中我们想了解的元素，就可以看到 Elements 中调到该部分的 html 代码并高亮。

在 Elements 中，我们可以通过 上下左右键 来改变我们高亮的部分：

• 上 选中上面一行
• 下 选中下面一行
• 左 选中父节点
• 右 选中第一个子节点

DOM 节点编辑

我们可以通过常用的鼠标操作和快捷键操作来操作 Elements 的界面，双击一个 html 代码，就可以完成对 html 代码的编辑，需要注意的是，该编辑是临时编辑，刷新网页后，该编辑操作将不再存在。

强制元素保持状态

可以强制元素保持 :active, :hover, :focus, :visited 和 :focus-within 状态。

看下面的操作来做一个实验来了解操作步骤：

• 悬浮高亮测试

• 右键上面的 悬浮高亮测试 右键， 点击 Inspect， 并在 styles 中点击 :hov，勾选 :hover 选项，就可以强制保持元素状态：

  

  隐藏元素

  在 Inspect 中，在该节点上，按 h 键，就可以看到 class中添加了 __web-inspector-hide-shortcut__。 元素在页面上就隐藏了。

  要删除该节点可以删除 Delete。

  在控制端访问节点

  • 在控制端输入： $0就可以得到当前节点。
  • 在 Elements 中 html 代码上， 右键弹出菜单点击 Store as global variable。

  可以在 console 中 增加了一个 temp1 变量，并且 temp1 的值就是当前节点的 html 代码。

  

  • 在 Elements 中 html 代码上， 右键 Copy > Copy JS Path， 得到:

  document.querySelector("#gc-wrapper > main > devsite-content > article > article > div.devsite-article-body.clearfix > ol:nth-child(39) > li:nth-child(1) > ul > li.demo--hover.__web-inspector-hide-shortcut__")
  

  断点调试

  在高级程序编程过程中，调试是一个很重要的过程，而断点调试是调试的一个重要手段。
  在 chrome devTools 中，我们可以在html代码上添加节点树修改断点，属性修改断点和节点删除断点。

  添加节点属性的方式如下：
  

  添加了断点后，当该断点的节点的属性被修改时，就会在该断点上暂停运行。

  ---

  简单介绍就是就是这些了。