Chrome 开发工具指南 谷歌 Chrome 开发工具,是基于谷歌浏览器内含的一套网页制作和调试工具.开发者工具允许网页开发者深入浏览器和网页应用程序的内部.该工具可以有效地追踪布局问题,设置 JavaScript 断点并可深入理解代码的最优化策略. 适用人群 这篇教程将会带你从头开始使用学习如何利用 Google 提供的组件进行 Chrome 上的相关开发调试工作. 通过本教程,你将学会如何使用这些工具,并且学会如何通过它来分析调试提供的 Demo . 学习前提 在你继续本教程之前,你必须对…

注意:如果你是一个网页开发者同时想要获得最新版本的开发工具,那么你应该使用谷歌浏览器(金丝雀)Canary 版. Chrome 开发者工具 打开Chrome 开发者工具 选择浏览器位于浏览器窗口右上方的菜单栏的工具目录,选择开发者工具选项. 右击页面任何位置并选择审查元素. 开发工具将会在浏览器的下方打开. 有一些快捷键也可以用来打开开发工具: Ctrl + Shift + I ( 或在 Mac 上使用 Cmd + Opt+ I). Ctrl + Shift + J ( 或在 Mac 上使用 C…

Security 面板 使用 Security Overview 可以立即查看当前页面是否安全. 检查各个源以查看连接和证书详情(安全源)或找出具体哪些请求未受保护(非安全源). Security Overview 要查看页面的整体安全性,请打开 DevTools,然后转至 Security 面板. 您首先会看到 Security Overview.Security Overview 会一目了然地告诉您页面是否安全. 安全页面会通过消息 This page is secure (valid HT…

使用 Device Mode 模拟移动设备 使用 Chrome DevTools 的 Device Mode 打造移动设备优先的完全自适应式网站.了解如何使用 Device Mode 模拟多种设备及其功能. 警告:Device Mode 可以让您了解您的网站在移动设备上的大致显示效果,但要获得全面的了解,则应始终在真实设备上测试您的网站.DevTools 无法模拟移动设备的性能特性. 简述 在不同的屏幕尺寸和分辨率(包括 Retina 显示屏)下模拟您的网站. 通过可视化和检查 CSS 媒体查询…

检查动画 使用 Chrome DevTools 动画检查器检查和修改动画. 通过打开动画检查器捕捉动画.检查器会自动检测动画并将它们分类为多个组. 通过慢速播放.重播或查看动画源代码来检查动画. 通过更改动画时间.延迟.持续时间或关键帧偏移修改动画. 概览 Chrome DevTools 动画检查器有两个主要用途. 检查动画.您希望慢速播放.重播或检查动画组的源代码. 修改动画.您希望修改动画组的时间.延迟.持续时间或关键帧偏移. 当前不支持编辑贝塞尔曲线和关键帧. 动画检查器支持 CSS 动画…

检查和编辑页面与样式 使用 Chrome DevTools 的 Elements 面板检查和实时编辑页面的 HTML 与 CSS. 在 Elements 面板中检查和实时编辑 DOM 树中的任何元素. 在 Styles 窗格中查看和更改应用到任何选定元素的 CSS 规则. 在 Computed 窗格中查看和修改选定元素的框模型. 在 Sources 面板中查看在本地对页面所做的更改. 实时编辑 DOM 节点 要实时编辑 DOM 节点,只需双击选定元素,然后进行更改: 实时编辑样式 在 Style…

Application 面板 使用 App Manifest 窗格检查您的网络应用清单和触发 Add to Homescreen 事件. 使用 Service Worker 窗格执行与服务工作线程相关的全部任务,例如注销或更新服务.模拟推送事件.切换为离线状态,或者停止服务工作线程. 从 Cache Storage 窗格查看您的服务工作线程缓存. 从 Clear Storage 窗格中点击一次按钮,注销服务工作线程并清除所有存储与缓存. 网络应用清单 如果您希望用户能够将您的应用添加到他们移动设…

模拟和测试其他浏览器 您的任务不只局限于确保网站在 Chrome 和 Android 上出色运行.即使 Device Mode 可以模拟 iPhone 等多种其他设备,我们仍鼓励您查看其他浏览器模拟解决方案. 如果您没有特定设备,或者想要执行抽检,最佳方式就是直接在浏览器中模拟设备. 利用设备模拟器,您可以从工作站在一系列设备上模拟开发网站. 基于云的模拟器让您可以在不同平台之间对网站进行自动化单元测试." 浏览器模拟器 浏览器模拟器非常适合于测试网站的自适应能力,但它们无法模拟 API 差异.…

模拟传感器:地理定位与加速度计 由于大多数桌面设备都没有 GPS 芯片和加速度计,所以测试它们比较困难.Chrome DevTools 的 Sensors 模拟窗格可以通过模拟常见的移动设备传感器来降低测试的开销. 模拟地理定位坐标以测试地理定位替换值. 模拟设备方向以测试加速度计数据. 访问传感器控件 要访问 Chrome DevTools 传感器控件,请执行以下操作: 打开 DevTools 主菜单 在 More Tools 菜单下,点击 Sensors 注:如果您的应用检测到使用 Java…

检查资源 使用 Application 面板的 Frames 窗格可以按框架组织资源. 您也可以在 Sources 面板中停用 Group by folder 选项,按框架查看资源. 要按网域和文件夹查看资源,请使用 Sources 面板. 在 Network 面板中按名称或其他条件过滤资源. 按框架组织资源 使用 Application 面板的 Frames 窗格可以按框架组织页面的资源. 顶层(上面屏幕截图中的 top)是主文档. 在这下方(例如上面屏幕截图中的 widget2)是主文档的子…