自定义调试窗口---上面板

Customize and Control devTools

一、调试窗口和当前网页有3种布局形式(Dock side)

1、调试窗口在当前网页上弹出，彼此独立；2调试窗口在当前网页下面，彼此相连；3、调试窗口在当前网页右边，彼此相连。

二、隐藏下面板(Hide console)

三、查询所有文件 (Search all files)

四、查询设备(Inspect devices)

在智能手机还未普及时，以前为了预览页面在移动设备上的效果，需要先将页面上传到测试服务器，再将url输入到设备浏览器，或者使用第三方二维码扫码应用，通过移动设备访问打开浏览实际效果。每次换设备都要重复这些操作，页面太多时，就容易让人厌烦。下面介绍一下安卓远程调试带来的便利、所需环境，操作方法。

1、关于便利

可以调试站点的页面，可以调试安卓原生App中的WebView，可以实时将安卓设备的屏幕图像同步显示到开发机器，可以通过端口转发（port forwarding）与虚拟主机映射（virtual host mapping）实现安卓移动设备与开发服务器进行交互调试。

2、关于所需环境

pc端安装最新的chrome，手机端安装最新的chrome，数据线，如果调试网页，移动设备需要安装Chrome forAndroid ，且安卓系统须为Android 4.0+，对于APP WebView的调试，需要系统为Android 4.4+ 并且原生应用内的Webview须进行相应的调试声明配置，远程调试要求桌面版Chrome浏览器版本要高于安卓移动设备的Chrome版本号。

3、关于操作方法

首先在移动设备上开启USB调试模式，用数据线连接设备并允许调试，在电脑上打开chrome浏览器，在调试窗口查询设备，确保打钩选中Discover USB devices。

如果USB连接成功，这时候我们可以看到移动设备的型号和设备上运行的页面和允许调试的WebView列表。找到需要调试的目标页面，点击inspect即可打开DevTools，点击reload可重新加载当前的调试页面，点击focus tab可将标签页置顶，close为关闭当前页面。更可以通过在输入框中键入网址新开一个页面。点击inspect打开DevTools后，你可以选中页面中的DOM元素，同时设备中对应元素也高亮显示，也可使用DevTools中的Inspect Element 选中目标元素，可以实时与移动设备页面交互，方便的定位问题所在，进行代码调试。在输入框中输入一个新的网址，点击Opoen可打开你想要调试的新页面。

五、设置(Settings)

转载于:https://www.cnblogs.com/camille666/p/debug_tool_0.html