Chrome开发工具 技巧和窍门

及 larger row 的情况：在网络面板上获取更多信息的技巧左键点击网络面板中时间轴列的头部，可以访问更多网络请求的细节。你可以在以下的选择中选择一个：时间轴开始时间响应时间结束时间持续时间等待时间浏览灰色的文字来深入查看：每次请求的 HTTP 网络定义是什么？每次请求第一个字节是什么时候？什么才是响应时间最慢的资源？什么是持续时间最短的资源？在网络面板中的任何一行的头部右键，你可以启用或者禁用列。默认情况下有 3 列不会显示：CooliesDomainSet-CookiesWebSocket 检查在网络面板中，你可以使用底部窗口的过滤器来观察 WebSocket 信息帧。比如：进入 Echo 实例中，在网络面板底部选择 “WebSocket” 过滤器然后点击 “Connect” 按钮。你通过 “Send” 按钮发送的任何信息都可以用 “Frames” 子面板观察到。绿色表示来自你客户端的信息。WebSocket 的观察十分的有效，它允许你在观察 WebSocket handshake 的同时查看 WebSocket 的独立帧。更多：等等，开发者工具可以做什么？ | Igvita.com更多：使用开发者工具观察 Websocket | Kaazing在网络面板中查找和过滤 XHRs当你在网络面板中观察网络请求时，可以通过键盘上的特殊键来缩小查找范围。使用 Ctrl + F 或者 Cmd + F 可以让整个过程更轻松。在搜索输入框中，输入你要搜索的关键字，那些请求中有文件名/ URL 与之匹配的就会高亮显示。结果显示出来后，你可以使用输入框旁边的上下按钮来选择你需要的那一项。尽管这很有用，但是如果它能够只显示和你搜索的关键字相匹配的选项的话就会更有用。"Filter" 选项就可以做到这一点，下面请看例子：更多：评估网络性能 | 开发者工具文档获取网络堆栈内部状态"about:net-internals" 页面是一个特殊的 URL，它存放了网络堆内部状态的一个临时视图。这对调试性能和连接问题十分有帮助。这里面包括请求性能的信息，代理设置以及 DNS 缓存。同样需要注意的是 about:net-internals/#tests 是可以对一个特殊的 URL 进行测试的。更多计算网络性能的技巧，请前往评估网络性能在这里可以学习如何在你的应用中深入查看网络选项。包括时间数据详情，HTTP 请求和相应头，cookies，WebSocket 数据以及更多。学习哪个资源开始加载的时间最慢？哪个资源占需要最长的加载时间（持续时间）？谁开启了一个网络请求？等等。设置模仿触摸事件触摸是一种在电脑上很难测试的输入方式，因为大多数桌面上不支持触摸输入。在移动端上测试则会延长你的开发周期，一旦你做出了改变，你就需要上传到服务器然后切换到设备上测试。这个问题的一个解决方法是在你的开发机器上模拟一个触摸事件。对单点触摸来说，Chrome 开发者工具支持单个触摸事件的模拟，这使得在电脑上调试移动应用变得更加简单。要开启触控仿真：打开开发者工具中的 overrides 菜单滚动然后选中 "Enable touch events"现在我们可以像标准桌面事件那样调试触控事件，也可以在源面板中设置事件监听断点。更多：开发者工具设备模式 | DevTools 文档模拟 UA 字符串 & 设备视图通常在桌面上启动一个样品然后在你想支持的设备上处理具体移动设备部分会更加容易一些，设备模拟器可以帮助我们使这个过程更加简单。开发者工具支持包括本地 User Agent 以及尺寸的重载在内的设备仿真。这就使开发者可以在不同的设备和操作系统上调试移动端的显示效果。现在你可以模拟确切设备的尺寸，比如 Galaxy Nexus 以及 iPhone 等来测试你的查询驱动设计。更多：开发者工具的设备模式 | 开发者工具文档模拟地理信息在一个支持地理信息支持的 HTML5 应用中，调试不同经纬度下的输出是十分有用的。开发者工具支持重写 navigator.geolocation 的位置信息，也可以模拟一个模拟地理位置。重写地理位置进入到地理信息实例中。允许页面使用你的位置。这样可以获取精确位置。打开在开发者工具中的重写菜单。选中 ”Override Geolocation“ 然后输入 Lat = 41.4949819，Lat = -0.1461206。刷新页面。这个例子会使用你重写后的位置信息来定位。现在选中 "Emulate position unavailable" 选项。刷新页面。页面就会提示你查找你的位置信息失败。更多：开发者工具模拟移动设备 | DevTools DocsDock-to-right 的视图调试Dock-to-right 模式同样对在一个缩小的视图中预览你页面的表现是很有帮助的。要使用这个：通过长按开发者工具窗口底部的布局选择器图标来开启 dock-to-right 模式。你现在可以拖拽窗口分配器然后左右拖拽来改变视图的宽度，然后触发你的媒体查询断点。让 JavaScript 失效点击右下角的设置齿轮，然后在 Setting > General 中启用 ”Disable Javascript“。当开发者工具已经打开并且这个选项也被选中，那么当前页面 JavaScript 脚本就会失效。如果需要该功能，同样的也可以通过 "-disable-javascript" 命令来启动 Chrome。通用在标签中快速切换Cmd + ] 和 Cmd + [(或者 Ctrl + ] 和 Ctrl + [)快捷键允许你轻松地在开发者工具的不同标签之间切换。使用他们就可以避免手动选择标签。尝试改进后的 dock-to-right改进后的元素面板和源面板是水平分开放置的，并且，只要你打开了 dock-to-right 模式，你就可以在 Chrome 测试版中体验该特性：然而，如果你已经有一个非常宽的屏幕并且不想使用这个屏幕，只需要在设置面板中取消选中 ”Split panels vertically when docked to right“ 选项即可。更多：3 步获取一个更好的 Dock-to-Right 体验 | G+使用 Disable Cache 让缓存失效在设置齿轮下面，你可以启用 Disable cache 选项来使磁盘缓存失效。这对开发来说用处是巨大的，但是开发者工具必须是可见并打开的才能实现这个功能。检查 Shadow DOM含有 Shadow DOM 的元素并不会在元素标签中显示。使 Show Shadow DOM 的复选框生效。重启开发者工具你可以稍微看看里面的 Shadow DOM。比如，你可以在 HTML 5 块中看一下 Shadow DOM 标题。预览所有可检查的页面如果你发现你自己已经会使用 remote 调试了，你可能想试试 ”about:inspect“，它会展示在 Chrome 中展示所有可检查的标签/扩展插件。点击 ”inspect“ 来选择一个页面然后加载开发工具并且跳转到相应页面。详细观察哪个站点有应用缓存通过访问 "about:appcache-internals",你可以看到有关应用缓存的信息。这允许你查