Published on

dev-tool重点内容

Authors

devtools 快捷键

1.快速打开关闭devtools，mac下Command+Option+ J ，windows下 Control+Shift+J 2.

功能

  1. elements

1.1元素

  • 在元素处按左右箭头，分别展开和关闭标签

  • 显示元素大小。按Control+ Shift+P或Command+ Shift+ P(Mac) 打开命令菜单，键入Show rulers on hover，然后按Enter。

  • 搜索节点内容

    通过字符串、CSS 选择器或 XPath 选择器搜索 DOM 树。

    将光标聚焦在“元素”面板上。

    按Control+F或Command+ F(Mac)。搜索栏在 DOM 树的底部打开。

为了避免节点之间不必要的跳转,清除设置。 “设置” > “首选项” > “全局” > “键入时搜索”复选框。(search as you type)

  • 捕获节点屏幕截图【好功能】

在“元素”面板中，右键单击图像 URL，然后从下拉菜单中选择“捕获节点屏幕截图”【capture node screenshot】

  • 强制节点保持在:active、:hover、:focus、:visited和 等状态:focus-within

Hover over The Lord of the Flies below. The background color becomes orange.

  • The Lord of the Flies
    • // 此行是有hover状态的
  • Crime and Punishment
  • Moby Dick

    • 右键 The Lord of the Flies above and select Inspect.

    右键

  • The Lord of the Flies
    • and select Force State > :hover

    • esc 打开抽屉console

    • 输入$0,打印在element中选中的元素

    鼠标悬停这个元素，可以在页面中选中该元素

    • 复制JS路径

    • The Brothers Karamazov
      • 在 DOM 树中右键单击并选择Copy > Copy JS Path。解析document.querySelector()为节点的表达式已复制到剪贴板。 会打印出 document.querySelector("body > div > div > div.main > div.elephant-main > div.elephant-pouch")