疑问：Chrome开发工具

Home

打开Chrome 开发者工具

了解面板

设备模式

• 注释：移动端开发工具

元素面板

• 使用元素面板可以自由的操作DOM和CSS来迭代布局和设计页面
• 注释:Elements标签页

控制台面板

• 在开发期间，可以使用控制台面板记录诊断信息，或者使用它作为 shell（壳） 在页面上与JavaScript交互。
• 注释：Console标签

源代码面板

• 在源代码面板中设置断点来调试 JavaScript ，或者通过Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器。
• 疑问：Workspaces（工作区）是指哪部分？不会有安全问题吗？
• 注释：使用开发者工具的Workspaces（工作区）进行持久化保存，没有对应的菜单入口，请参考 https://developers.google.cn/web/tools/setup/setup-workflow
• 注释:Sources标签页

网络面板

• 使用网络面板了解请求和下载的资源文件并优化网页加载性能。
• 注释：了解资源时间轴，没有对应的菜单入口，请参考 https://developers.google.cn/web/tools/chrome-devtools/network/understanding-resource-timing
• 注释：网络带宽限制，没有对应的菜单入口，请参考 https://developers.google.cn/web/tools/chrome-devtools/network/network-conditions
• 注释:Network标签页

性能面板

• 在 Chrome 57 之后时间线面板更名为性能面板
• 使用时间轴面板可以通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能
• 注释:Performace标签页

内存面板

• 在 Chrome 57 之后分析面板更名为内存面板.
• 如果需要比时间轴面板提供的更多信息，可以使用“配置”面板，例如跟踪内存泄漏
• 注释:Memory标签页

应用面板

• 在 Chrome 52 之后资源面板更名为应用面板
• 使用资源面板检查加载的所有资源，包括IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表
• 疑问：本地和会话存储，应用程序缓存具体是指？
• 注释:Application标签页

安全面板

• 使用安全面板调试混合内容问题，证书问题等等
• 疑问：什么是混合内容问题？
• 疑问：证书是如何运用的？

————————————————————————————————————————————————————————————————————

CSS

Get Started With Viewing And Changing CSS（查看和更改 CSS）

Add a CSS class to an element（将CSS类添加到元素）

• Click .cls. DevTools reveals a text box where you can add classes to the selected element.（点击.cls。DevTools将显示一个文本框，您可以在其中向所选元素添加类。）
• 注释：点击.cls只是切换添加class界面的伸展，不会改变已经添加了的class名。

Add a pseudostate to a class（向类添加伪状态）

• 注释：有以下几种状态
  • :active（a标签被点击时）
  • :hover
  • :focus
  • :visited（a标签已经被访问）
  • :focus-within（元素自身或者它的某个后代匹配 :focus 伪类）

Change the dimensions of an element（更改元素的尺寸）

• In the Box Model diagram in the Styles tab, hover over padding. The element's padding is highlighted in the viewport.（在 Styles 选项卡的 Box Model 图中，将鼠标悬停在 padding上。元素的填充在视口中突出显示。）
• The Box Model defaults to pixels, but it also accepts other values, such as 25%, or 10vw.（盒模型默认为像素，但它也接受其他值，例如25%，或10vw）

CSS Reference（CSS参考）

Select an element（选择一个元素）

• In DevTools, click the element in the DOM Tree.（在DevTools中，单击DOM树中的元素。）
  • 注释：DOM树应该是指位于底部由标签名、class、id组成的路径结构
• In DevTools, run a query like document.querySelector('p') in the Console, right-click the result, and then select Reveal in Elements panel.（在控制台中运行document.querySelector('p')，右键单击结果，然后选择 Reveal in Elements panel 显示结果。）

View CSS（查看CSS）

View only the CSS that's actually applied to an element（仅查看实际应用于元素的CSS）

• Inherited properties are opaque. Check the Show All checkbox to see all inherited values.（继承的属性是隐藏的，点击 Show All 查看）

Search and filter an element's CSS（搜索和过滤元素的CSS）

• Use the Filter text box on the Styles and Computed tabs to search for specific CSS properties or values.（使用 Styles 和 Computed 选项卡上的 Filter 文本框来搜索特定的CSS属性或值。）

View a page in print mode（在打印模式下查看页面）