Chrome 谷歌浏览器开发者工具是一套内置于Google Chrome中的Web开发和调试工具,可用来对网站进行迭代、调试和分析。 写这个课程的目的是基于国内没有很好的,系统地给介绍一下强大的Chrome谷歌浏览器的开发工具,大家在学习这套课程的时候,要对着左边的侧边栏Chrome开发者工具中文文档:方便大家查找和学习。


为什么要看这套课程呢? 谷歌浏览器提供给了web开发者强大的debug功能,这个chrome课程可以加深大家对前端的debug和理解,对开发web有很好的见解,能帮助大家解决很多前端和后端上面的问题,相信看完之后,大家对web的开发会有更深的了解,非常值得大家去了解。 Dogfood: 寻找最新版本的Chrome 开发者工具, Chrome Canary 总是有最新的DevTools. 打开Chrome 开发者工具 • 在Chrome菜单中选择 更多工具 > 开发者工具 • 在页面元素上右键点击,选择 “检查” • 使用 快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac) 我们先来了解一下整个开发者工具的面板吧。

Chrome 谷歌浏览器的设备模式


使用设备模式构建完全响应式,移动优先的网络体验。 • Device Mode • Test Responsive and Device-specific Viewports • Emulate Sensors: Geolocation & Accelerometer

Chrome 谷歌浏览器的开发者工具

Chrome 谷歌浏览器的元素面板


使用元素面板可以自由的操作DOM和CSS来迭代布局和设计页面. • 检查和调整页面 • 编辑样式 • 编辑DOM

Chrome 谷歌浏览器的开发者工具

Chrome 谷歌浏览器的控制台面板


在开发期间,可以使用控制台面板记录诊断信息,或者使用它作为 shell在页面上与JavaScript交互。详细可以看console控制台的使用指南。 • 使用控制台面板 • 命令行交互

Chrome 谷歌浏览器的开发者工具

Chrome 谷歌浏览器的源代码面板


在源代码面板中设置断点来调试 JavaScript ,或者通过Workspaces(工作区)连接本地文件来使用开发者工具的实时编辑器。 • 断点调试 • 调试混淆的代码 • 使用开发者工具的Workspaces(工作区)进行持久化保存 Chrome 谷歌浏览器的开发者工具

Chrome 谷歌浏览器的网络面板


使用网络面板了解请求和下载的资源文件并优化网页加载性能。 • 网络面板基础 • 了解资源时间轴 • 网络带宽限制 Chrome 谷歌浏览器的开发者工具

Chrome 谷歌浏览器的性能面板


Note: 在 Chrome 57 之后时间线面板更名为性能面板. 使用时间轴面板可以通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能。 • 如何查看性能 • 分析运行时性能 • 诊断强制的同步布局 Chrome 谷歌浏览器的开发者工具

Chrome 谷歌浏览器的内存面板


Note: 在 Chrome 57 之后分析面板更名为内存面板. 如果需要比时间轴面板提供的更多信息,可以使用“配置”面板,例如跟踪内存泄漏。 • JavaScript CPU 分析器 • 内存堆区分析器 Chrome 谷歌浏览器的开发者工具

Chrome 谷歌浏览器的应用面板


Note: 在 Chrome 52 之后资源面板更名为应用面板. 使用资源面板检查加载的所有资源,包括IndexedDB与Web SQL数据库,本地和会话存储,cookie,应用程序缓存,图像,字体和样式表。 • 管理数据 Chrome 谷歌浏览器的开发者工具

Chrome 谷歌浏览器的安全面板


使用安全面板调试混合内容问题,证书问题等等。 • 安全 Chrome 谷歌浏览器的开发者工具

本文内容来自:Chrome 谷歌浏览器开发者工具 – Break易站


—Author: Arvin Chen —Web Address: www.breakyizhan.com (Break易站)

 
转载请保留页面地址:https://www.breakyizhan.com/chromeconsole/1249.html
扫描二维码添加微信 
  • ,每次淘宝领取淘宝优惠券,淘宝购物更优惠。现在添加微信,还可以领取机械键盘50元优惠券!添加微信后回复机械键盘即可领取!
    支持我们,就用微信淘宝!