Chrome Developer tools工具学习笔记

今天这篇文章，主要是想给前端新手介绍几个工具，以便大家更好地理解，并且提高学习效率，仅限个人简介，如果有补充，欢迎评论留言。

1. DOM结构理解工具：

DOM是文档对象模型（Document Object Model，简称DOM），浏览器浏按从上到下，从左到右的顺序，读取DOM树的文档节点。
这个解释抽象到生无可恋，刚接触DOM概念的同学应该是一脸懵逼，所以推荐大家可以live-dom-viewer，帮助大家理解dom结构。

链接：http://software.hixie.ch/utilities/js/live-dom-viewer/

图片里可以看到，可以在markup里输入自己的测试代码，dom view的窗口会现实你这串代码的dom结构，并且输出代码效果，非常方便并且visible的工具。

2. Matering Chrome Tools

网址链接：https://masteringdevtools.com/
App本地运行git clone方式：

git clone https://github.com/jkup/mastering-chrome-devtools.git
cd mastering-chrome-devtools
npm install
npm start

这个工具以workshop的形式帮助新手练习使用Chrome开发者工具，主要包括editing, debugging, profiling and memory leaks四个方面，这个工具最好配合一门课程Mastering Chrome DevTools使用，这个课程也是这个工具的开发者开的，在masterfrontend网站上，学生用github education package，六个月内可以免费看所有的课程。

3. Official Documentation

谷歌官方developer tools的说明书，不用多说，直接付网址
地址：https://developers.google.com/web/tools/chrome-devtools/