谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器。伴随每六个星期一次的发布周期和不断扩大的强大的开发功能，Chrome变成了一个必须的工具。大多数可能熟悉关于chorme的许多特点，例如使用console和debugger在线编辑CSS。在这篇文章中，我们将分享15个很酷的技巧，让你能够更好的改进工作流程。

嗨，各位，又到了周末总结时间！得益于大量的 Grunt 和 Gulp 插件，我们可以轻松实现网站数据的可视化，虽然深入理解这些工具还比较困难，但分门别类的将它们列出来，也是很有帮助的。

顾名思义Chrome开发工具就是一个工具，它允许Web开发人员可以通过浏览器应用程序干预和操作Web页面，也可以通过这个工具调试和测试Web页面或Web应用程序。有了这个工具，你可以做很多有趣的事情。

了解如何：打开 DevTools 控制台；堆叠冗余消息或将其显示在各自的行上；清除或保留输出，或者将其保存到文件中；过滤输出，以及访问其他控制台设置。

本交互式教程循序渐进地教您在 Chrome DevTools 中调试 JavaScript 的基本工作流程。 虽然教程介绍的是如何调试一种具体问题，但您学到的一般工作流程对调试各种类型的 JavaScript 错误均有帮助。如果您使用 console.log() 来查找和修正代码中的错误，可以考虑改用本教程介绍的工作流程。 其速度快得多，也更有效。

大家都知道熟悉掌握工具的使用能让我们事倍功倍，对完成任务的产生的影响非常大。对于JavaScript的调试，都一直说是难以调试，但事实上如果你掌握一些调试技巧，那么解决一些问题或调试Bug的时间会少很多。这篇文章整理了14个你可能不知道的调试技巧，但是下次你发现自己需要调试的JavaScript代码时，可能会用得上，也会因此记住这些调试技巧。这些调试技巧大部分都是针对Chrome和Firefox的浏览器，尽管也有许多和其他浏览器调试工具一样。接下来，我们开始了解这些调试技巧。

这篇文章介绍了Firefox DevTools的一些鲜为人知的特性，这些特性可以在你构建和调试新的CSS网格布局时派上用场。你可能在今年听过不少有关于CSS特性的讨论。如果你在同一个句子中听到CSS和网格这两个词，那么我强烈建议你去看看CSS Grid的这个CSS模块。浏览器以CSS盒模型的方式呈现HTML元素，而CSS Grid则是一种新的布局模式，它为开发者提供了控制这些盒子及其内容大小和位置的能力。该模块引入了一系列属性，允许我们创建网格结构，并使用CSS控制网格项的位置和大小。