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

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

自定义调试窗口---上面板相关推荐

cesium 局部加载_cesium自定义气泡窗口infoWindow后续优化篇 - GIS之家
摘要:http://www.cnblogs.com/giserhome/p/6248858.html该篇文章实现的自定义气泡窗口是基于修改cesium源代码基础上,这种做法只是援兵之计,凑合应付的,投 ...
cesium 之自定义气泡窗口 infoWindow 后续优化篇（附源码下载）
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 该 ...
百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题
项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息. 实现:通过不停的画覆盖物并删除掉.点击覆盖物时弹出信息窗口. 问题:删除掉覆盖物后信息窗也删除掉了.因为信息窗是建立在覆盖 ...
一些可能没用过的调试窗口
首先说明:如果没有进入调试模式的话,默认的调试窗口如下: 开始前的准备: 新建控制台程序DebugWindowDemo: 修改Program.cs 的代码为: using System; using ...
WIN７　UAC／结构体的Equals方法／C# 开发wince程序，窗口上总留有一块空白区域／静态构造函数...
1. vs2005在win7下通过IIS7调试时,调用dll失败,但在XP下正常.相信是权限问题,请问应该如何解决?能不能设置dll默认以管理员身分运行? 备注:此DLL已注册成功! 回复引用全部回 ...
如何调试 Android 上 HTTP(S) 流量
http://greenrobot.me/devpost/how-to-debug-http-and-https-traffic-on-android/ 如何调试 Android 上 HTTP(S) ...
如何使用Fiddler调试线上JS代码（转自：http://www.cnblogs.com/RockLi/p/3511132.html）
大家平时肯定都用过火狐的Firebug或者谷歌的调试工具来调试JS,但遗憾的是我们不能像编辑html,css那样来直接新增或者删除JS代码. 虽然可以通过调试工具的控制台来动态执行JS代码,但有时候却 ...
一起谈.NET技术，Visual Studio自定义调试窗体两个小技巧
本文翻译:Few Tips on Customizing Debugging Window View in Visual Studio . 使用DebuggerBrowsable特性可以自定义调试窗体 ...
C++ 自定义调试信息的输出
自定义调试信息的输出调试信息的输出方法有很多种, 例如直接用printf, 或者出错时使用perror, fprintf等将信息直接打印到终端上, 在Qt上面一般使用qDebug,而守护进程则一 ...

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

自定义调试窗口---上面板相关推荐

最新文章

热门文章