Chrome浏览器调试

Chrome浏览器调试

最佳答案 53678位专家为你答疑解惑

Chrome浏览器调试

用Chrome浏览器自带的开发者工具进行调试。

1.F12打开开发者工具

2.菜单栏简要介绍：

菜单栏

（1）元素选择器（2）PC端/移动端模式切换（3）Elements——元素。页面上所有HTML节点（4）Sources——页面引入的web资源，包括图片img、样式css、脚本js（5）Console——控制台（js调试器）（6）Network——网络。当前页面加载了哪些资源（7）Timeline——时间线。页面加载每项资源消耗的时间。（一般用来优化网页，缩短页面响应时长）（8）Profiles（9）Application——应用。（存放调试时所需的数据存储）包括Local Storage、Session Storage、Indexed DB、Web SQL、Cookies（10）Security——安全性（11）Audits

3.切换到移动端模式。

可以查看网页在各种主流移动设备上的显示效果。也可以手动设置屏幕尺寸。

移动端模式

这个功能的特点是模拟设备、模拟触摸和模拟网络状况。

各种模拟设备型号供选择各种模拟网络状况供选择

4.审查元素

对页面中某一元素，单击右键弹出菜单中的审查元素选项，会自动打开调试工具，定位到Elements中该元素HTML的位置。

单击右键菜单中的审查元素选项定位到该元素相关HTML。鼠标悬浮显示元素的标签类型、类名、尺寸信息右键删除该元素

5.编辑元素

（1）右键单击Edit as HTML

Edit as HTML

（2）元素样式编辑。编辑后可以直接在浏览器中预览，不会在本地保存。

styles编辑计算后样式元素事件监听

6.js调试

（1）在js代码中打断点调试。

断点调试

（2）查看对象属性和方法。（JavaScript 中的所有事物都是对象:字符串、数值、数组、函数... 此外，JavaScript 允许自定义对象。自定义对象是带有属性和方法的特殊数据类型。）

查看对象属性和方法

（3）查看Scope——作用域

Scope

（4）草稿纸

草稿纸

（5）Network

Headers里面一般关心的是请求方式和状态码以及看请求字符串参数传的对不对。

Headers

Preview（预览，json格式）

Preview

7.更多内容链接

（1）利用Console来调试JS程序、Console用法总结（1）（2）利用console.table()做高级JS调试、Console用法总结（2） （3）15个必须知道的chrome开发者技巧 ： 中文译文 / 英文原文

Chrome浏览器调试技巧

1、谷歌浏览器调试界面友好，性能强大，下面简单介绍开发者工具的几个超级使用的调试技巧。

2、Ctrl+P快速搜寻文件

当DevTools被打开的时候，按Ctrl+P,就能快速搜寻和打开你项目的文件。

3、Ctrl + Shift + F搜索一个特定的字符串

如果你希望在源代码中搜索要怎么办呢？在页面已经加载的文件中搜寻一个特定的字符串，快捷键是Ctrl + Shift + F，这种搜寻方式还支持正则表达式哦

4、Console控制台

想必大家都在用 console.log 在控制台输出点东西，其实console还有其它的方法：

console.log("打印字符串");//在控制台打印自定义字符串console.error("我是个错误");//在控制台打印自定义错误信息console.info("我是个信息");//在控制台打印自定义信息console.warn("我是个警告");//在控制台打印自定义警告信息console.debug("我是个调试");//在控制台打印自定义调试信息cosole.clear();//清空控制台（这个下方截图中没有）

5、Sources资源

我们可以找到当然浏览器页面中的js 源文件，方便我们查看和调试，针对压缩之后的代码，我们可以点击下面的{}大括号按钮将代码转成可读格式

文件原压缩的代码:

转换成可读格式的代码:

6、Sinppets创建一个新的片段文件比如当我们想不起某个方法的具体使用时候，会打开控制台随意写一些测试代码，或者想测试一下刚刚写的方法是否会出现期待的样子，但是控制台一打回车本想换行但是却执行刚写的半截代码.

所以推荐使用Sources下面的左侧的Sinppets代码片段按钮这时候点击创建一个新的片段文件，写完测试代码后把鼠标放在新建文件上run，再结合控制台查看相关信息

新建了一个名叫：app.js的片段代码，在你的项目环境页面内，该片段可执行项目内的方法

7、Call Stack调用栈

当断点执行到某一程序块处停下来后，右侧调试区的 Call Stack 会显示当前断点所处的方法调用栈，从上到下由最新调用处依次往下排列，Call Stack 列表的下方是Scope Variables列表可以查看此时局部变量和全局变量的值。图中可以看出，我们最先走了toggleTab这个方法，然后走到了一个更新对象的方法上，当前调用在哪里，箭头会帮你指向哪里，同时我们可以点击，调用栈列表上的任意一处，即可回头再去看看代码

但是若你想从新从某个调用方法出执行，可以右键Restart Frame(我测试时未发现该功能)， 断点就会跳到此处开头重新执行，Scope 中的变量值也会依据代码从新更改，这样就可以回退来从新调试，错过的调试也可以回过头来反复查看

8、显示和修改变量值

在Console中直接输入变量，或是在Source中选择变量，然后点击右键，在右键菜单中选择" evaluate selected text in console "，就可以在Console中显示变量的值了。也可以直接在Console中输入变量名=变量值，就可以修改变量的值了，相当于我们无需借助编辑器就可以调试线上的数据