web前端常用调试方法

1、普通浏览器调试方法

作为前端都知道的调试方法。打开浏览器调试框（此处以谷歌浏览器举例），我们会看到如图的所有检查项目：

检查界面

其中，Elements为元素检查框，关于文档内容、样式等都可以在进行调试。

Console控制台常用来显示程序中的打印内容，是最常用的调试方法，也可以直接在此处写js进行程序操作；另外一个用处是，我们常打开一个控制台快捷进行一些代码验证、演示等。

Network对网络请求进行调试，所有要通过网络请求的内容都会在此显示，包括js、css文件，图片，http/https请求等，可以查看到请求最终发送的头部参数、地址和返回内容。

查看https请求的结果

Application 常用查看cookie信息、本地存储信息以及对iframe的调试。

Sources 调试框常用来进行程序中的断点调试，常用的方式是在Watch添加要监视的变量，程序步进的时候观察变量变化。与C调试方式基本无异。

Sources调试框

其他几个笔者不常用，在此就不做讲述。

2、webview调试方法

安卓webview调试使用谷歌的DevTools。在浏览器中输入 chrome://inspect/#devices ，把手机连接上电脑选择调试模式，然后打开相应的app中使用webview的页面，看到如图页面。

注意：

1、需要debug版本的app，安卓要在webview实例中配置允许调试， WebView.setWebContentsDebuggingEnabled(true);

2、由于该功能需要到墙外加载相应的手机调试包，故你需要翻墙才可以实现本方法

谷歌DevTools界面

点击inspect即可跳出熟悉的页面调试台

webview检查页面

ios版本的webview调试就比较方便，依靠于safari，不需要翻墙。

1、在Safari的偏好设置中选择“高级”，在底下的“在菜单栏中显示开发菜单”打钩。

2、在iphone的Safari设置中勾选 “JavaScript”和“web检查器”

iphone设置

3、手机上打开相应的app的webview页面，连接电脑，活动区在Safari时点击“开发”菜单即可看到自己的iphone，选中后看到当前的webview页面地址，打开即可弹出页面调试窗口。

调试选项

当前vue.js 框架比较火热，除了常用的web调试方法之外，官方也推荐了一款vue专用插件 vue-devtools，安装链接：

依照文档描述的方法安装即可，不同浏览器有相应的方式安装。

另外如果可以翻墙，可直接在谷歌的拓展程序中搜索安装，十分方便

谷歌拓展工具中搜索vue

vue-devtools可以很便捷地对.vue 组件中定义的变量进行监视，以及vuex、和事件的监视。

vue调试窗

另外，关于移动端的页面调试还可以使用 eruda 工具。日后使用到会再更新该调试方法

以上就是常用的web前端调试方法，日后也会补上更多调试方法。

最后编辑于：2018.06.10 19:05:01