| Chrome 控制台使用手册专栏【一】基础窗口、移动设备窗口 | 您所在的位置：网站首页 › 浏览器console窗口怎么打开 › Chrome 控制台使用手册专栏【一】基础窗口、移动设备窗口 |
Chrome 控制台使用手册专栏【一】基础窗口、移动设备窗口
|
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 样式值，有个颜色预览小方块，点击打开颜色选择器
点击更多，切换Dock side， 改变 DevTools 展示位置（会记忆）
也可以用快捷键command+shift+d快速实现 Element 选择器点击 或者使用快捷键command+shift+c 快捷命令打开控制台后，同时按下 Ctrl+Shift+P 则会打开命令行
传送门 查找文件打开控制台后，同时按下 Ctrl+P 则会打开文件资源查找
点击按钮切换，或者使用快捷键command+shift+m切换至设备模式
拖拽可以将视图调整为任意尺寸，
也可以直接输入设置具体尺寸
单击断点以更改视图的宽度，以便触发媒体查询生效
模拟移动设备或桌面设备
主要差异是 鼠标是 圆圈/普通，触发事件是 touch/click 没有这一下拉选项，先从菜单选择 add device type / remove device type 进行添加
浏览器提供特定移动设备的尺寸，可以根据需求选择对应设备，自动切换视图尺寸
单击“旋转 请注意，如果您的设备工具栏很窄，旋转按钮会消失 显示设备框架 （show device frame /hide device frame）
添加自定义移动设备
输入自定义设备信息进行添加，勾选复选框可在页面移动设备列表展示
视图左、上方出现标尺
视图尺寸缩放
要限制网络和 CPU，请从Throttle列表中选择Mid-tier mobile或Low-end mobile
要仅限制 CPU 而不是网络，请转到性能面板，单击捕获设置 要仅限制网络而不限制 CPU，请转到Network面板并从Throttle列表中选择Fast 3G或**Slow 3G **
您还可以从“性能” 面板设置网络限制。单击捕获设置 要打开覆盖地理位置的 UI，请单击自定义和控制 DevTools 或按 Command+Shift+P (Mac) 或 Control+Shift+P（Windows、Linux、Chrome 操作系统）打开命令菜单，输入Sensors，然后选择Show Sensors
Show Sensors
可以从列表中选择一种预设，或选择Other 其他.. 自定义输入自己的坐标，或选择Location unavailable 位置不可用以测试您的页面在地理位置处于错误状态时的行为方式，同时可以Manage 预设坐标列表或者添加自定义坐标到预设列表。
打开更多工具>传感器（同覆盖地理位置） 从预设列表选择一种方向 或者 可以自定义方向（输入 apha、beta、gamma值）
参考1 参考2 |
【本文地址】