好

利用DevTools Elements工具来调试页面DOMElements工具是Chrome DevTools界面的第一个标签，如今很多网页都通过JavaScript来动态的修改DOM以及CSS，传统的查看HTML和CSS源代码来调试页面，无法看到那些动态的内容，一遍一遍的刷新页面查看修改HTML和CSS的效果对于开发来说效率也很低下。Elements工具就是一个可以帮助我们实时的查看和编

（上次DOM的部分做了些补充，欢迎查看Chrome development tools学习笔记(2)）利用DevTools Elements工具来调试页面样式CSS（Cascading Style Sheets层叠样式表）定义了Web页面的表示层，是能够真正做到网页表现与内容分离的一种样式设计语言。本文主要是讲调试工具，关于CSS学习可以参考W3school的CSS部分：http:

前言Debug是每个程序员成长过程中必须会的一门技能。也是现在大学编程教育中缺失的一门课程，老师们往往更在乎让程序正确的运行，但可能对于学生来说只有10%的时候程序是直接运行成功输出正确结果的，90%的时候程序可能无法运行或者运行结果不正确。我周围的很多同学就是在一次次的程序出错中渐渐丧失了对编程的兴趣，我想，如果学校里可以在教会编程的时候，也传授下debug的方法，让学生能够自己去一步步

利用NetWork工具来评估网页性能NetWork工具记录了Web页面上的每一次网络操作，包括详细的请求时间数据、HTTP的请求和响应、以及WebSocket传输的数据等等。有时候我们会发现我们自己的网页加载比较慢，而其他访问网站速度正常。这时候就可以考虑通过NewWork工具来找出性能瓶颈进行优化。 关于Resource Timing APINewWork工具使用了Res

调试JavaScript随着现在JavaScript应用的越来越广泛，在面对前端工作的时候，开发者需要强大的调试工具来快速有效地解决问题。我们文章的主角，Chrome DevTools就提供了这么个工具来帮助我们减少调试JavaScript代码的痛苦。顺便说下，不同版本的Chrome浏览器的DevTools可能略微有所不同，除了数字递增的版本号以外，Chrome浏览器包括Stabl