Chrome 控制台使用手册专栏【一】基础窗口、移动设备窗口

wangsd
4,080 阅读4分钟

Chrome开发者工具（简称DevTools）是一组网页制作和调试的工具，内嵌于Google Chrome浏览器中。DevTools使开发者更加深入的了解浏览器内部以及他们编写的应用。通过使用DevTools，可以更加高效的定位页面布局问题，设置JavaScript断点并且更好的理解代码优化。

访问 DevTools

  • 访问DevTools，首先用Chrome打开一个web页面或web 应用，也可以通过下面的方式：

    • 在浏览器窗口的右上方选择Chrome菜单, 然后选择工具（更多工具） > 开发者工具。
    • 在页面上任意元素上右键，然后选择审查元素（检查）。

  • 常用快捷键来快速的打开DevTools:

    • 使用 Ctrl + Shift + I (Mac上为 Cmd+Opt+I)打开DevTools。
    • 使用 Ctrl + Shift + J (Mac上为 Cmd+Opt+J)打开DevTools中的控制台
    • 使用 Ctrl + Shift + C (Mac上为 Cmd+Shift+C)打开DevTools的审查元素模式。

DevTools 窗口

DevTools目前主要包括以下九个主要功能组：

  • Elements 元素面板：检查和调整页面，调试DOM和CSS，查看节点绑定事件、动画
  • Console 控制台面板：调试JavaScript，查看日志，交互式代码调试
  • Network 网络面板：接口、页面资源请求监控，调试网络活动
  • Application 应用面板：查看和调试客户端存储，如Cookie、LocalStorage、SessionStorage、图片、字体、样式
  • Sources 源代码资源面板：调试JavaScript页面源代码，进行断点调试
  • Performance 性能面板：查看页面性能细节，细粒度对网页载入进行性能优化
  • Security 安全面板：查看页面安全及证书问题
  • Memory 内存面板：JavaScript CPU分析器，内存堆分析器
  • Audis 使用Google Lighthouse辅助性能分析，给出优化建议

你可以通过 Ctrl+[ 和 Ctrl+] 快捷键在不同面板之间进行切换。

DevTools现已经支持内置颜色选择器。

在Elements > Styles > color/background 样式值，有个颜色预览小方块，点击打开颜色选择器 image.png

切换DevTools 位置

点击更多，切换Dock side， 改变 DevTools 展示位置（会记忆） image.png

也可以用快捷键command+shift+d快速实现

Element 选择器

点击 image.png 鼠标悬浮页面内容，可以查看DOM节点信息（样式-尺寸、字体、间距、节点属性），同时 Elements 会自动高亮对应DOM节点

image.png

或者使用快捷键command+shift+c

快捷命令

打开控制台后，同时按下 Ctrl+Shift+P 则会打开命令行 image.png

传送门

查找文件

打开控制台后，同时按下 Ctrl+P 则会打开文件资源查找 image.png

Device Mode 模拟移动设备

点击按钮切换，或者使用快捷键command+shift+m切换至设备模式 image.png

响应式模式

拖拽可以将视图调整为任意尺寸， image.png

也可以直接输入设置具体尺寸 image.png

媒体查询

image.png

单击断点以更改视图的宽度，以便触发媒体查询生效 image.png

设备类型

模拟移动设备或桌面设备 image.png

主要差异是 鼠标是 圆圈/普通，触发事件是 touch/click

没有这一下拉选项，先从菜单选择 add device type / remove device type 进行添加 image.png

移动设备视图模式

浏览器提供特定移动设备的尺寸，可以根据需求选择对应设备，自动切换视图尺寸 image.png

单击“旋转 旋转”将视口旋转为横向。 image.png

请注意，如果您的设备工具栏很窄，旋转按钮会消失

显示设备框架 （show device frame /hide device frame） image.png

添加自定义移动设备 image.png

输入自定义设备信息进行添加，勾选复选框可在页面移动设备列表展示 image.png

视图标尺

image.png

视图左、上方出现标尺 image.png

缩放视图

视图尺寸缩放 image.png

限制网络和 CPU

要限制网络和 CPU，请从Throttle列表中选择Mid-tier mobile或Low-end mobile image.png

仅限制CPU

要仅限制 CPU 而不是网络，请转到性能面板，单击捕获设置 捕捉设置，然后从CPU列表中选择4x 减速或6x 减速 image.png

仅限制网络

要仅限制网络而不限制 CPU，请转到Network面板并从Throttle列表中选择Fast 3G或**Slow 3G ** image.png

您还可以从“性能” 面板设置网络限制。单击捕获设置 捕捉设置，然后从网络列表中选择快速 3G或**慢速 3G ** image.png

覆盖地理位置（自定义设备地理位置）

要打开覆盖地理位置的 UI，请单击自定义和控制 DevTools 自定义和控制 DevTools，然后选择更多工具>传感器 image.png

或按 Command+Shift+P (Mac) 或 Control+Shift+P（Windows、Linux、Chrome 操作系统）打开命令菜单，输入Sensors，然后选择Show Sensors image.png

Show Sensors image.png

可以从列表中选择一种预设，或选择Other 其他.. 自定义输入自己的坐标，或选择Location unavailable 位置不可用以测试您的页面在地理位置处于错误状态时的行为方式，同时可以Manage 预设坐标列表或者添加自定义坐标到预设列表。 image.png

设备方向

打开更多工具>传感器（同覆盖地理位置）

从预设列表选择一种方向 或者 可以自定义方向（输入 apha、beta、gamma值） image.png

参考1
参考2

avatar
文章
阅读
粉丝