chrome开发者工具之JS调试利器

今天我来给大家讲解一下js的console.log()看看控制台输出带给我们的愉悦感受。

详细步骤：1、首先我们需要安装最新版的谷歌chrome浏览器，通过百度搜索chrome下载就可以了。

2、安装完成以后打开chrome浏览器，按图所示打开“开发者工具”，可以直接进入console控制台，我这里在百度页面打开的console控制台，可以看到百度在控制台发布了一条招聘信息，不得不说这个招聘广告打得漂亮。

3、现在我们在前端开发工具里面使用jquery输出几个信息看看。我在id为top1的标签中增加了一个bt属性，现在通过jquery直接输出bt属性到控制台，输出方式为console.log($("#top1").attr("bt")); 另外我还输出了所有li标签的html内容。

4、好了，代码写好以后，我们使用chrome打开该页面，同时保证开发者工具也打开，这是在console控制台就可以看到输出结果了，是不是比alert舒服了很多，妈妈再也不用担心我点alert费鼠标了。

5、console控制台除了输出结果意外还有一个重要功能，那就是js报错提醒，现在我们在js代码中写一个错误的代码(把obj[i]外面的$选择符去掉)，看看控制台的提示。

如果每次更改代码以后，刷新一下页面就可以查看当前的console输出。大家觉得有用的话以后不妨就用这个方法，相信一定会用的顺心。