Chrome DevTools指南汉化版共享给大伙儿，从最根本的详细介绍到方法， 根据应用DevTools，能够更为有效的精准定位页面合理布局难题， 设定JavaScript中断点而且更强的了解代码设计。

Chrome DevTools指南汉化版浏览

Chrome DevTools指南汉化版文件目录

感谢

软件简介

学习培训基本

概述

开发设计工作流引擎

应用控制面板

小技巧——控制面板篇

小技巧——Timeline篇

小技巧——Profiles篇

小技巧——编码篇

小技巧——页面原素篇

小技巧——互联网篇设定

专用工具应用

CSS预CPU(todo)

运用储存(todo)

Chrome关键有9个作用组，各自相匹配了9个面板：

Elements：在 Elements 面板中能够根据 DOM 树的方式查询全部页面原素，与此同时也可以对这种页面原素开展眼见为实的编写

Console：一方面用于纪录页面在实行全过程中的信息（一般通过各种各样 console 句子来完成），另一方面用于作为 shell 对话框来实行脚本制作及其与页面文本文档，DevTools等开展互动

Sources：Sources 面板关键用于调节页面中的 JavaScript

Network：在 Network 面板中能够查询根据互联网来要求来的資源的详尽信息及其要求这种資源的耗时

Performance：在 Performance 面板能够查询页面载入全过程中的详尽信息，例如在什么时候逐渐做什么事情，耗时多长时间这些。有些人会问，这一跟里面的 Network 有什么不同呢，上边也可以表明耗时信息。在 Performance 面板中，你不但能够见到在互联网载入資源的信息，还能见到分析 JS，测算款式，重绘等页面载入的各个方面的信息

Memory：Memory 面板关键表明页面 JS 目标和密切相关的 DOM 连接点的运行内存遍布状况

Application：纪录网页页面载入的任何資源，包含储存信息，缓存文件信息及其页面使用的照片，字体样式，脚本制作，款式等信息

Security：用以检验当众页面的安全系数

Audits：财务审计面板会对页面的载入开展剖析，随后得出提升页面特性的提议，官方网站提议查询 PageSpeed Insights 来获取大量的页面载入提议。