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

顾名思义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控制网格项的位置和大小。

我们花了很长的一段时间和多篇文章的篇幅和大家一起探讨了 CSS 网格布局模块的特性。从前面这些内容，不难发现网格布局的复杂性，灵活性。我想大家也意识到了，CSS Grid到来之后，Web中设计布局的方法也已经改变了。我们可以在纸上绘制布局草图，思考布局设计的全部内容。当你开始敲击代码的时候，就已经知道布局会是什么样子。正因为CSS Grid布局的复杂性，再加上网格容器上定义的网格是不可见的。为此我们不得不考虑，如何更轻易的使用网格，或者碰到网格布局相关的 Bug，又应如何来调试。熟悉 Web 开发的同学都知道，在调试布局或CSS相关的问题时，喜欢在元素上添加一个边框。在网格布局中，虽然可以使用类似的方法在网格容器和网格项目中添加边框，帮助我们快速的定位；但是我们没法给网格线添加边框。不过庆幸的是，目前主流的浏览器，比如 Chrome、Firefox、Safari 和 Microsoft Edge 浏览器的开发者工具（DevTools）都提供了网格布局审查器。有了这些工具之后，可以快速的帮助我们使用网格，调试使用网格碰到的问题。