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

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

检查和编辑页面与样式 使用 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 差异.…

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

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

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

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

检查和管理存储.数据库与缓存 查看和修改本地存储与会话存储. 检查和修改 IndexedDB 数据库. 对 Web SQL 数据库执行语句. 查看应用缓存和服务工作线程缓存. 点击一次按钮即可清除所有存储.数据库.缓存和服务工作线程. 本地存储 如果您使用本地存储存储键值对 (KVP),则可以从 Local Storage 窗格中检查.修改和删除这些 KVP. 双击键或值可以修改相应的值. 双击空白单元格可以添加新 KVP. 点击 KVP ,然后按 Delete 按钮 () 可以删除该 KVP.…

编辑 DOM Chrome DevTools 的 Elements 面板中的 DOM 树视图可以显示当前网页的 DOM 结构.通过 DOM 更新实时修改页面的内容和结构. DOM 定义您的页面结构.每一个 DOM 节点都是一个页面元素,例如,标题节点或段落节点. 通过渲染的 DOM 实时编辑页面的内容和结构. 不过请记住,您无法在 Elements 面板中通过 DOM 更改修改源文件.重新加载页面会清空任何 DOM 树修改. 使用 DOM 断点留意 DOM 更改. 检查元素 使用 Element…

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)…

检查和删除 Cookie 从 Application 面板检查和删除 Cookie. TL;DR 查看与 Cookie 有关的详细信息,例如名称.值.网域和大小,等等. 删除单个 Cookie.选定网域的 Cookie 或所有网域的全部 Cookie. 使用 Cookies 窗格可以查看和删除 Cookie.您无法修改 Cookie 值. Cookie 按网域列示.其中包括主文档和所有嵌套的框架. 选择一个"框架组"将显示该组中所有资源.所有框架的所有 Cookie. 请注意,这种分组…

Sources 面板中 代码段是您可以从任何页面运行的小脚本(类似于小书签). 使用"Evaluate in Console"功能可以在控制台中运行部分代码段. 请注意,Sources 面板中的常用功能(如断点)也可与代码段结合使用. 创建代码段 要创建代码段,请打开 Sources 面板,点击 Snippets 标签,在导航器中点击右键,然后选择 New. 在编辑器中输入您的代码.如果您未保存更改,您的脚本名称旁会有一个星号,如下面的屏幕截图所示.请按 Command+S (Mac)…

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

之前有说到Element,Console,Sources大多运用于debug,Network可用于debug和查看性能,今天的主角Timeline更多的是用在性能优化方面,它的作用就是记录与分析应用程序运行过程中所产生的活动. 认识Timeline 接下来开始详细的分析下每个标记处的作用(有几个还没标记出来的也有介绍,顺序是按照面板从左到右,从上到下) 记录按钮 是否需要对当前页面的运行进行记录,当打开记录按钮开始执行记录过程的时候,该按钮显示红色 清除按钮 按下后会清除之前的记录信息,瞬间白板…

Sources面板主要用于查看web站点的资源列表及javascript代码的debug 熟悉面板 了解完面板之后,下面来试试这些功能都是如何使用的. 文件列表 展示当前页面内所引用资源的列表,和平常的文件tree一样. 内容区域 可在该区域查看打开的文件的脚本,也可以在区域内下断点,打断指定执行代码行. 断点方式: 1.在脚本中写入debugger 2.在Sources面板文件内标注断点. debugger: var num = 1; console.log(num); debugger; 效…

前段时间看git的相关,记的笔记也大致写到了博客上,还有些因为运用不熟,或者还有一些疑惑点,暂时也不做过多纠缠,之后在实践中多运用得出结论再整理分享吧. 工欲善其事,必先利其器.要想做好前端的工作,也应该多了解浏览器开发工具的使用,近来几天在看html和css的一些技巧性知识,顺便也把chrome一些懂的地方再熟悉和不懂的地方去学习,把开发工具理解理解,也分享给小伙伴们,今天暂时是console相关的吧(偷个小懒,从用的最熟的面板入手,之后计划整理出chrome开发工具各个面板的使用说明~也需要…

Chrome开发工具-Console 看了别人的博客,才发现在百度主页用开发工具“Console”可以看到百度的招聘信息 前端调试工具可以按F12打开,谷歌的开发工具中的Console面板可以查看错误信息.打印调试信息.调试js代码,还可以当作Javascript API查看 如果我想查看console都有哪些方法和属性,我可以直接在Console中输入“console”并执行.或者用"console.dir(console)",同样可以实现查看console对象的方法和属性. con…

之前有说到Element,Console,Sources大多运用于debug,Network可用于debug和查看性能,今天的主角Timeline(现已更名Performance)更多的是用在性能优化方面,它的作用就是记录与分析应用程序运行过程中所产生的活动. 认识Timeline 接下来开始详细的分析下每个标记处的作用(有几个还没标记出来的也有介绍,顺序是按照面板从左到右,从上到下) 记录按钮 是否需要对当前页面的运行进行记录,当打开记录按钮开始执行记录过程的时候,该按钮显示红色 清除按钮 按…

开发过程中难免会遇到内存问题,emmm... 本文主要记录一下Chrome排查内存问题的面板,官网也有,但有些说明和例子跟不上新的版本了,也不够详细...   !!! 多图预警!!!    简单的内存信息列表   如果只想查看当前浏览器的各个 tab 正在使用的内存量,则在 Setting - More Tools - Task Manager 即可.效果如下图:     那个列表里的可勾选项,没看错,是对于可选的信息数据列.   那个 End Process 按钮,没看错,选择一项后,可以在浏…

Element 译为“元素”,Element 面板可以让我们动态查看和编辑DOM节点和CSS样式表,并且立即生效,避免了频繁切换浏览器和编辑器的麻烦. 我们可以使用Element面板来查看源代码,它不但可以很好的格式化DOM节点,清晰的展现HTML文档,还可以查看JavaScript创建的DOM节点和iframe中的DOM节点,比在当前网页中右击鼠标选择“查看网页源代码”强大很多. 总之,Element面板可以让我们很透彻的了解DOM和CSS的底层结构. 我们将以下面的HTML代码为例来详细了解…

http://www.w3cplus.com/tools/dev-tips.html 一.Sources 面板介绍: Sources 面板分为左中右 3 部分左:Sources 当前页面加载的资源列表,Content scripts 是在 Web 页面内运行的 js 脚本资源列表,同常是开发调试插件时使用.中:代码面板,这里展示选中的脚本代码.右:执行控制面板,可以在这里查看.控制断点以及一些运行的详细信息. 二.设置断点: 通过点击代码面板(中)侧边的行号来设置.取消断点,刷新页面即可看到效果…

第十一章 制作炮台的旋转 大家知道,炮台需要向四周不同的角度发射炮弹,这就需要我们将炮台设置成为会旋转的物体,接下来我们就一起制作一个会旋转的炮台. 第一步:给炮台的炮筒添加旋转函数. 给炮台的炮筒部分添加一个旋转函数,使得炮台随着鼠标在X方向上的移动而移动.在Project[项目文件栏]中右键——> ——> 新建一个JS函数,并按F2将其更名为“TurretRotate”,然后输入如下代码. 点选场景面板中的炮塔,找到炮塔上半部分所对应的对象,如图11.1所示: 图11.1 接着将刚才的 文…

前端开发中我们经常要在浏览器中做一些细节调整,比如对 CSS 的微调,最快的方式当然是直接在 Chrome 的开发者工具中调整,但问题在于在控制台中调试好的数值我们还需要再在 CSS 源码中再写一次,效率就低了不少.而 Chrome 的 Workspace 工具就能帮助我们把调试工具中修改的内容自动保存到相应的文件中. 方法也挺简单,下面以调试一个 CSS 文件为例: 打开需要调试的页面,再开启调试工具(F12.alt + command + i),切换到 Sources 选项卡,在 CSS 资…

友情提示:全文图片高能,如使用手机阅读,请确保在wifi情况下或者流量充足.图片有点渣,也算辛苦做出来的,请别嫌弃- Elements面板主要展示当前页面的组织结构,在如今的应用程序中,HTML页面初始化时加载的不一定就是之后看到的DOM树,有一个页面结构的实时调试工具可以很好的帮助开发者调试开发和调试bug,下面开始认识下Elements面板. 打开开发工具 1.右键点击页面,点击"检查" (mac && window) 2. control+command+j (m…

命令行运行Headless Chrome Chrome 安装(需要带梯子) 下载地址 几个版本的比较 Chromium 不是Chrome,但Chrome的内容基本来源于Chromium,这个是开源的版本,小时级别的更新 Canary 是试验版,翻译过来就是金丝雀,金丝雀对瓦斯等毒气很敏感,浓度稍高就会停止鸣叫甚至挂掉,金丝雀是瓦斯等毒气检测的土办法,这个场景在<寻龙诀>中黄渤的操作中也能看到.哈哈 扯远了,这个是daily build 版本. Dev 是开发版,weekly build版本 B…

Chrome 开发者工具有 Application 这么一个面板,主要作用是检查 web 应用加载的所有资源,包括 Manifest.Service Workers.Local Storage.Session Storage.IndexedDB.Web SQL(该标准早已废弃,被 IndexedDB 干趴下).Cookies.Cache Storage.Application Cache(已被 Service Workers 干趴下).BackGround Services(头一回见,和 sw…

经常会听到比如"为什么我的js代码没执行啊?","我明明发送了请求,为什么反应?","我这个网站怎么加载的这么慢?"这类的问题,那么问题既然存在,就需要去解决它,需要解决它,首先我们得找对导致问题的原因,才能"对症下药". 每个文件的载入.每次发送的请求也都是一次网络交互,所以在这个面板中,我们能够看到我们所需要的js文件是否被加载?我们所请求的接口到底返回了没有?我们能够知道哪个文件拖慢了整个web页的加载过程?Netwro…

1.github下载地址:https://github.com/vuejs/vue-devtools 有Git的同学直接 Git clone https://github.com/vuejs/vue-devtools 2.下载安成之后打开cmd进入vue-devtools文件夹把依赖装好npm install 之后再进行npm run build 最好装一个cnpm 3.然后打开shells>chrome>src>manifest.json 把里面的"persistent&qu…