工具推荐

用vue的watch属性的小伙伴应该就很熟悉监听这个概念，在chrome中，他以很贴心的给我们提供了两个方法，一个是`monitor`，一个是`monitorEvents`。这两个方法从事的也是监听相

chrome中devtools大家应该很熟悉，里面有着很多的面板，像elemnts，console以及network等等。这些面板在我们的开发中占着举足轻重的作用。 但是在chrome中其实还有一个

在element面板我们往往都是选择相应节点，对样式进行调试。不过，在这个面板中，其实还藏着一些小技巧的，让你的调试更加方便。下面我就给大家把我所收集的一一介绍下。

chrome中的颜色选择器相信大家应该很熟悉，可能大家用过最多的功能就是通过它的吸管工具，吸取页面的颜色，进行颜色取值。其实不止这些，它里面还藏着很有意思的功能的。

chrome的network面板算是我们用的最频繁的面板之一了，我们项目中请求的资源都会这个面板里面展示，还会提供给我们很多信息。而功能一旦繁杂的话，不熟悉的话，效率肯定会大大折扣。今天我给大家介绍几

上一章我们说到可以给每一条日志加上时间戳`timestamps`，来更好的分析日志信息。但有时候我们可以需要的不是这样，可能更需要的是代码的执行时间，对于这种情况，我们可以用的console的另一对方

前端开发调试的过程中，最常用的手段就是通过 `console.log(...)`来打印各种信息。不过在某些情况下，除了通过log来打印，也可以通过别的方式来进行打印，而且效果更直观，更方便。

平常我们在前端开发调试的过程中，用的最常用的一种手段就是通过`console.log(...)`来打印日志，根据日志来分析问题。其实还有一种手段就是`breakpoint`，它可以在你想要的观察地方，

前端与后端的交互，往往充斥着大量的api接口调用，而这些接口调用往往都是异步的，而解决异步问题，无非不是通过`promise`，就是通过`async` 和 `await`。 用过promise的应该

用过npm的都知道，通过它我们可以安装自己想用的任何依赖，比如element-ui，lodash等等。那你想没想过有一天我们可以在chrome浏览器中也可以用这些依赖。是不是觉得很新奇？对，没错。今天

有时候我们浏览一个壁纸网站的时候，可能我们想把这个页面的图片地址全都扒过来，可能你会下载一个工具，获取通过别的途径来实现。但今天我要告诉你，JavaScript也可以，配合上你的浏览器，几行代码帮你轻

用过`vscode`中的`Command Palette`的同学肯定能够体会到，通过键入相应的指令就可以执行相应的操作，是多么一键美妙的事情。而在`chrome`的`devtool`中也有类似的功能，

在我们开发的过程中用chrome调试的时候，往往需要进行开启开发者工具，切换面板以及查找等操作，通过鼠标去点击的话，往往需要通过一层层的选项卡来找到相应的功能，比较繁琐。如果通过快捷键的话，肯定会事半

在我们进行前端代码调试的时候，往往会通过 `console.log('彼时彼刻嵌入此时此刻')`进行输出日志，来查看代码的信息，或根据报错信息，对代码进行调整。而因此必定会涉及对信息的复制，以此报错信

> 作为一名合格的前端开发者，浏览器可以说是我们必须要掌握的一门工具之一。而我们开发中最常用的浏览器就是顶顶大名的chrome浏览器，来自谷歌大厂。作为一款2008首次在window发布的浏览器，经这

前言 在前端开发的时候，往往都需要都需要后端提供接口数据来进行相应页面的开发。但这个时候就需要后端先行开发，之后前端才进行开发，从而可能会影