chrome开发工具指南(五)
Main Menu
Click More to open the Main Menu.
Settings
To open Settings, do one of the following:
- Press F1 while DevTools is in focus.
- Open the Main Menu and then select Settings.
Command Menu
To open the DevTools Command Menu, press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows, Linux).
Drawer
Press Escape to open or close the Drawer.
Figure 4: A DevTools window, with the Drawer open at the bottom. The Console tab is open in the Drawer.
Click More to open other Drawer tabs.
Figure 5: The button for opening Drawer tabs, outlined in blue.
Change the DevTools UI
Reorder panel tabs
Click and drag a panel tab to change its ordering. Your custom tab order persists across DevTools sessions.
Change DevTools placement
To change the placement of the DevTools window:
- Open the Main Menu.
- Select Undock into separate window
, Dock to left
, Dock to bottom
, or Dock to right
.
Note: Dock to left was introduced in Chrome 58.
You can also change the placement of DevTools from the Command Menu. The names of the commands are the same as the options mentioned above.
Use dark theme
To set DevTools to a dark theme:
- Open Settings.
- Click the Preferences tab.
- Under the Appearance section, set Theme to Dark.
You can also set DevTools to dark theme from the Command Menu.
Experiments
To enable DevTools experiments:
- Go to chrome://flags/#enable-devtools-experiments.
- Click Enable.
- Click Relaunch Now, at the bottom of the page.
The next time you open DevTools, there's a new page called Experiments in Settings.
chrome开发工具指南(五)的更多相关文章
- Chrome 开发工具指南
Chrome 开发工具指南 谷歌 Chrome 开发工具,是基于谷歌浏览器内含的一套网页制作和调试工具.开发者工具允许网页开发者深入浏览器和网页应用程序的内部.该工具可以有效地追踪布局问题,设置 Ja ...
- chrome开发工具指南(一)
注意:如果你是一个网页开发者同时想要获得最新版本的开发工具,那么你应该使用谷歌浏览器(金丝雀)Canary 版. Chrome 开发者工具 打开Chrome 开发者工具 选择浏览器位于浏览器窗口右上方 ...
- chrome开发工具指南(二)
Application 面板 使用 App Manifest 窗格检查您的网络应用清单和触发 Add to Homescreen 事件. 使用 Service Worker 窗格执行与服务工作线程相关 ...
- chrome开发工具指南(十四)
模拟和测试其他浏览器 您的任务不只局限于确保网站在 Chrome 和 Android 上出色运行.即使 Device Mode 可以模拟 iPhone 等多种其他设备,我们仍鼓励您查看其他浏览器模拟解 ...
- chrome开发工具指南(十二)
使用 Device Mode 模拟移动设备 使用 Chrome DevTools 的 Device Mode 打造移动设备优先的完全自适应式网站.了解如何使用 Device Mode 模拟多种设备及其 ...
- chrome开发工具指南(七)
检查动画 使用 Chrome DevTools 动画检查器检查和修改动画. 通过打开动画检查器捕捉动画.检查器会自动检测动画并将它们分类为多个组. 通过慢速播放.重播或查看动画源代码来检查动画. 通过 ...
- chrome开发工具指南(六)
检查和编辑页面与样式 使用 Chrome DevTools 的 Elements 面板检查和实时编辑页面的 HTML 与 CSS. 在 Elements 面板中检查和实时编辑 DOM 树中的任何元素. ...
- chrome开发工具指南(十三)
模拟传感器:地理定位与加速度计 由于大多数桌面设备都没有 GPS 芯片和加速度计,所以测试它们比较困难.Chrome DevTools 的 Sensors 模拟窗格可以通过模拟常见的移动设备传感器来降 ...
- chrome开发工具指南(十一)
检查资源 使用 Application 面板的 Frames 窗格可以按框架组织资源. 您也可以在 Sources 面板中停用 Group by folder 选项,按框架查看资源. 要按网域和文件夹 ...
随机推荐
- 整合微信小程序的Web API接口层的架构设计
在我前面有很多篇随笔介绍了Web API 接口层的架构设计,以及对微信公众号.企业号.小程序等模块的分类划分.例如在<C#开发微信门户及应用(43)--微信各个项目模块的定义和相互关系>介 ...
- python关于list的三个内置函数filter(), map(), reduce()
''' Python --version :Python 2.7.11 Quote : https://docs.python.org/2/tutorial/datastructures.html#m ...
- xmake v2.1.5版本正式发布,大量新特性更新
此版本带来了大量新特性更新,具体详见:xmake v2.1.5版本新特性介绍. 更多使用说明,请阅读:文档手册. 项目源码:Github, Gitee. 新特性 #83: 添加 add_csnippe ...
- cve-2017-8464 复现 快捷方式远程代码执行
cve-2017-8464 2017年6月13日,微软官方发布编号为CVE-2017-8464的漏洞公告,官方介绍Windows系统在解析快捷方式时存在远程执行任意代码的高危漏洞,黑客可以通过U盘.网 ...
- Vue.js安装
环境 操作系统:window7 虚拟机:centos7 vue.js: 2.8 安装nodejs 参考我得文章: http://blog.csdn.net/u013066244/article/det ...
- textarea的换行符处理以及正确的在Html中显示
个人不太喜欢在页面做过多的逻辑处理,贴出java的处理方式 /** * Html转换为TextArea文本 * @return */ public static String HtmlToText(S ...
- sublime text3 配置使用
前言 sublime text3 是一款优秀的代码编辑器,很多好用的功能让我成为其忠实用户. 流程 1.安装完成后首先配置package control,把下面的代码复制到sublime 的控制台: ...
- XP和win7的软件崩溃提示
运行在XP上的应用软件崩溃时总提示:应用程序错误,xxxxx地址不能写... 现在win7上提示的就只有关闭和调试程序,没有这些详细信息.其实win7下面也记录了相关的信息. 位置在:“控制面板” - ...
- PACS发展历史
最先推动 PACS发展的动力来自于传统的相机厂家.这是因为当数字化浪潮到来的时候,他们首先就意识到这对他们的产品是一个不可逆转的巨大的冲击.他们当然有着自己的优势:对各个厂家的设备连接能力有着最为清楚 ...
- 地图性能测试利器PerfQA Analyzer
PerfQA Analyzer作为一个地图性能测试工具,能针对ArcGIS 技术堆栈的系统进行性能问题的排查,用于系统试运行阶段的压力测试以及在线系统运维.大大减轻了GIS系统管理员的性能调优工作压力 ...