前端常见的调试方式

• 以浏览器为维度
• 以Android开发的IDE的维度
• 以三方代理抓包数据分析的维度

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调试

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

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

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

iphone设置

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

vue调试方式

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

https://github.com/vuejs/vue-devtools

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

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

谷歌拓展工具中搜索vue vue-devtools可以很便捷地对.vue 组件中定义的变量进行监视，以及vuex、和事件的监视。

3、线上问题调试抓包

Ios

推荐Stream这个软件，简单易用，可以快捷设置HTTPS的证书，简单有效的抓取线上的数据参数以及返回结果，从数据的层面有效验证问题，解决问题

Android

推荐同一局域网的情况下，使用fiddle参数设置，安装证书到安卓手机，开启手机无线代理，同一网络频段电脑抓包，实现参数的抓取，以及断点调试