使用 chrome inspect 提高开发效率
使用 chrome inspect 提高开发效率
打开 chrome 浏览器，输入网址：chrome://inspect/#devices 即可打开一个新的世界。
一下内容分为三部分：
-
chrome inspect的简单介绍； - 如何使用
Stetho-
Elements功能部分 -
Network功能部分 -
Resources功能部分
-
- 小结
注：以下内容均建立在
Android手机已经打开了USB调试功能，且通过ADB连接到电脑上。且对应安装的应用包不能是
release包，release包不支持在线调试功能。
1. 简单介绍
界面如下：
inspect 界面
我们可以通过点击对应包名的 inspect按钮 打开 inspect 面板：
inspect 面板界面部分
谷歌很早就推出了该功能，具体地址如下：
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?hl=zh-cn
最初的用处是为了方便调试 webView 界面的，如下所示，所有应用的 webView 界面都可以通过 chrome 浏览器的 inspect 功能查看到，示例如下：
inspect webview
但上述操作流程显得比较繁琐，后来 facebook 推出了一个封装库 stetho，更简单使用，封装了对网络请求的拦截，功能也更强大一些。
github 地址： https://github.com/facebook/stetho
以下内容建立在使用
stetho的基础上。
2. 如何使用？
如何使用 stetho 呢？
-
gradle引入 -
Application中初始化
引入代码如下：
// chrome inspector
implementation 'com.facebook.stetho:stetho:1.5.1'
// `stetho-okhttp3` 如果需要对网络拦截，需要导入该引用，不需要则可引入
implementation 'com.facebook.stetho:stetho-okhttp3:1.5.1'
//如果要添加对网络的请求部分，需要添加 OKHttp 库
Application 中初始化:
代码如下：
class TLApplication : Application() {
override fun onCreate() {
super.onCreate()
// 注册 Stetho inspector
Stetho.initializeWithDefaults(this)
}
}
按照上述两个步骤，即配置完成。
下面主要讲一下 inspect 的 Elements 和 Network 功能
2.1 chrome inspect 的 Elements
是的，我们可以通过这个窗口，看到当前界面的布局及当前界面对应类的名称。
对于刚接手一个项目的开发来说，弄清楚类与界面的对应关系至关重要，这是不防使用一个 debug 包,
利用 inspect 功能就可以快速查看界面对应的类名称。
是不是十分方便？
示例如下：
element 选项
从图中可看到，当前的主要界面属于 FirstMainActivity 这个类，
它里面包含 FirstHomeFragment 和 MoreArticleTagFragment 两个 Fragment,
然后我们就可以通过这些信息，快速定位代码。
同时，在 inspect 窗口的右侧，还有一部分， 里面有一个 Properties 属性
当我们选中 main_view_pager 这个部分后，点击 Properties 后，作用如下，
element 2 properties 图示
会展示出当前选中 元素 的各项信息。
也是个方便的功能点。
注：如果只是想要拿到
当前界面 layout 的信息可以通过Android Studio的Tools->LayoutInspector选取对应的Activity界面获取到，信息更全面。
毕竟是AS内置功能，肯定更加好用。
这里不再详细说明，可自行查看。
2.2 chrome inspect 的 Network 功能
这部分是我最想说的部分，因为…… 太好用了，太实用了，比起 Charles 方便太多。当然 Charles 有它的用处。
当我们在进行 APP 功能开发时，在调试后端接口是否好用时，我们只需要利用 inspect 工具，就可以十分直观的查看到后端返回的数据样式。
当我们在打开一个 界面时，如果有网络请求，就会在显示出网络请求的返回接口：
后端网络接口的请求结果
其中 Header 里面是这次网络请求的具体 api 地址；
而 Preview 里面预览后端接口返回的数据样式，我们可通过这一项，快速排查问题，
是否是因为后端没有返回正确的数据，还是因为客户端处理错误，大大提高了开发效率。
同时也可以通过预览数据样式，判断是否是客户端解析数据出错，对应的
key是否正确。
现在一般 app 都会存在与后端的交互，学会该功能，开发起来简直不要太爽。
美中不足
美中不足的是，当前 Stetho 只支持通过 OKHttp 进行的网络请求，不过 OKHttp 毕竟是官方的，使用的也多，且 Retrofit 也是使用 OkHttp 进行网络请求的，所以也算是涵盖了大部分的场景。
2.3 chrome inspect 的 Resources 功能
resources 可以查看「数据库内容」，「 SharedPreference 数据」，不需要我们自行查看数据库文件，可在这里直观得看到是否存储成功，以及现有数据。
界面如下：
inspect 的 resources 功能
3. 小结
当然 chrome inspect 功能不止于此，上面所说的只是我平时喜欢使用的；
当然 Stetho 的功能也不止于此，能力有限，暂时写这么多。
我平时在工作中，十分喜欢使用 inspect 功能，在 debug 是往往能帮忙我节约很多时间。
所以，还不快快使用起来～～～
如果公司内部没有类似的工具，可安利公司使用一下，可以提高很多效率，也是间接的节约了成本。
2019.09.03 by chendroid
PS: 水平有限，上述内容如有错误，请大胆指出.
