Vue项指标调试工具,与PC机Chrome协作调试

Android4.4(KitKat)开端,使用Chrome开发者工具得以匡助我们在原生的Android应用中国远洋运输总集团程调节和测试WebView网页内容。具体步骤如下:

澳门葡京 1

参考自

目录

Vue 2.0的项目扩张
1.什么舒服地运用Atom
  安装插件
  配置皮肤颜色
2.Vue连串引入组件库
  引入方式
  支持ES2015
  Mint UI
  ElementUI
  iView
  Vonic
  MuseUI
3.Vue门类的调剂工具
  vue-devtools
  移动端调节和测试
    Chrome DevTools
    Safari Web Inspector
    Eruda
    spy-debuger
4.Vue档次官方注重库
  vue-loder
  vue-router
  Vuex
5.Vue种类第贰方重视库
  ESlint
    ESlint规则摘要
    ESlint规则风格
    ESlint忽略文件

(1)设置Webview调节和测试形式

后面写过一篇关于 Android Studio 断点调节和测试技巧 的篇章,但都以指向 Native
代码的调节和测试,对于 Hybrid 开发格局下的 WebView 却得不到入手。幸运的是,PC
中的 Chrome 浏览器提供的开发者工具能够援助大家长途调节和测试 Android 中的
WebView 加载的网页。

移步端WebView开发调节和测试:Chrome远程调节和测试

Chrome DevTools调试移动设备Brower Page Tabs/WebViews**

注意:有个很坑爹的地点,使用该意义供给FQ,你掌握。

安卓远程调节和测试近来协助具备操作系统(Windows,Mac, Linux, and Chrome
OS.)中调剂,帮助

● 调节和测试站点的页面

● 调节和测试安卓原生App中的WebView

● 实时将安卓设备的显示屏图像同步突显到支付机器。

● 通过端口转载(port forwarding)与虚拟主机映射(virtual host
mapping)完结安卓移动设备与支出服务器举办交互调试。

 

调剂须求:

● 开发环境安卓桌面版Chrome32+


一条USB数据线,连接电脑与运动装备,安装相应机型的USB驱动。驱动程序下载地址:

  
假设电脑上设置有百度手机帮手、360部手提式有线电话机帮手那类软件,一般连接后方可自行安装相应的USB驱动程序。

● 假设是调剂网页,移动装备亟需设置Chrome forAndroid
,且安卓系统须为Android 4.0+

● 对于APP WebView的调节,要求系统为Android 4.4+
还要原生应用内的Webview须实行相应的调试注脚配置。

评释:远程调节和测试要求桌面版Chrome浏览器版本要超越安卓移动装备的Chrome版本号。有规则的最好利用Chrome
的金丝雀尤其版Chrome Canary (Mac/Windows)也许Chrome桌面开发版Chrome Dev
channel release (Linux)。

第③步:首先在运动装备上开启USB调试格局。方法:

● Android 3.2+,打开设置 – 应用程序 – 开发,在“USB调节和测试”处打钩选上

● Android 4.0~ Android 4.1
,打开设置-开发者选项-进入在“USB调节和测试”处打钩选上。

● Android
4.2+,打开设置-关于手提式无线电话机-手提式有线电话机配置消息-连点“版本号”四回,再次回到上层就能够看看“开发者选项”展现出来了,在“USB调节和测试”处打钩选上。

澳门葡京 2

 

其次步:用USB数据线连接装置,驱动装好连接成功后,你只怕会在装置上看看一个弹框请求允许使用那台电脑通过usb调节和测试

 

 

澳门葡京 3 

 

勾选后点击“分明”。

其三步:在电脑上开辟Chrome浏览器的菜单– 越来越多工具 –
检查设备
(Chromemenu > More tools > Inspect
Devices),恐怕直接在浏览器地址栏输入chrome://inspect 可能about:inspect

 

澳门葡京 4

 

开拓后DevTools后,确定保障打钩选中Discover USB devices

 

澳门葡京 5 

假使USB连接成功,那时候大家能够看到移动设备的型号和装置上运营的页面和同意调试的WebView列表。找到供给调剂的对象页面,点击inspect即可打开DevTools,点击reload可重新加载当前的调节和测试页面,点击focus
tab可将标签页置顶,close为关门当前页面。更可以由此在输入框中键入网址新开3个页面。

 

点击inspect打开DevTools后,你能够选中页面中的DOM成分,同时配备中对应元素也高亮呈现,也可选拔DevTools中的Inspect Element 选中目的成分,能够实时与移动设备页面交互,方便的定位难题所在,举行代码调节和测试。

 

在输入框中输入3个新的网址,点击Opoen可打开你想要调节和测试的新页面。

 

表明:由于Chrome版本不一样,DevTools也可能有点距离,比如自身的Chrome38.0.2125.104 m版竟然从未打开新页面包车型地铁url输入框,升级到v39后恢复生机常常,知道原因的迎接留言。

  1. DevTools窗口使用F5快速键(CMD+冠道 for Mac)重新加载页面

  2. 利用Network面板能够实时观望页面在二弟大其实网络环境中财富的加载情状。

3.
Timeline面板能够用来分析页面渲染和CPU使用景况,平常意况下活动装备的品质会比电脑上要低一些。

4. 
在DevTools的Console控制埃德蒙顿编辑脚本实施,会同步呈以后移动设备中检查的页面。

5.
假使要调节本地搭建的服务器程序,须要动用端口转载和虚拟主机映射,以使设备上得以展现你本地环境下的页面内容。

 

调节WebView要求满足安卓系统版本为Android
4.4+已上。并且须要再你的APP内布局相应的代码,在WebView类中调用静态方法setWebContentsDebuggingEnabled,如下:

  1. if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) {  
  2.   
  3.    WebView.setWebContentsDebuggingEnabled(true);  
  4.   
  5. }  

 

上述配置情势适用于安卓应用内装有的WebView景况。

安卓WebView是或不是可调节和测试并不在于应用中manifest的标志变量debuggable,要是您想只在debuggable为true时候允许WebView远程调试,请使用以下代码段:

  1. if (Build.VERSION.SDK_INT>= Build.VERSION_CODES.KITKAT) {  
  2.   
  3. Vue项指标调试工具,与PC机Chrome协作调试。    if (0 != (getApplicationInfo().flags &=ApplicationInfo.FLAG_DEBUGGABLE))  
  4.   
  5.     { WebView.setWebContentsDebuggingEnabled(true);}  
  6.   
  7.   }  

 

WebView的可用列表如下:

澳门葡京 6

 

所列音讯个中囊括页面包车型客车title,url地址,页面尺寸大小及其相对于设备显示屏的相持地点。

 

实时显示屏投影(Live screencasting)

 

调节移动装备时视线在八个设备的屏幕中间来回切换太不便于了,screencast实现了运动装备显示器与支出环境DevTools的联合署名,你能够通过screencast与移动装备上的内容进行交互式的操作。

 

Screencast只表现页面包车型大巴始末,而不出示工具条地址栏、设备键盘等任何设施接口,这个在Screencase中显示为透明部分。

 

Android
4.4,是由谷歌公司创建和研究开发的代号为KitKat的手机操作系统,于巴黎时间二零一三年12月二十四日黎明(英文名:lí míng)对外公告了该Android新本子的称谓,为Android
4.4(代号 KitKat 奇巧)。据说,该代号来自多美滋的KitKat巧克力。对于KitKat
4.4.3,screencast不仅能够在Tab网页达成,在WebView上也足以一起交互操作。

 

点击 DevTools右上角的Screencast图标,能够开启Screencast视图,移动设备显示屏会实时呈未来右侧的Screencast面板中。

 

澳门葡京 7

 

 

Chrome32+版本的DevTools对连年的装备支撑native USB
debugging。而版本号稍低的片段则须求通过安装ADB或ADB
plugin调节和测试移动装备上的Chrome网页。由于事先一贯是使用ADB
plugin格局调节和测试,近期一番煎熬发现高版本更为有利于实用的特点,由于网上的素材比较零碎,关键的事物都尚未提及,坑也不少,那也便是写此文的缘故。

 

已经靠安装Android SDK套件,必要实践类似 adb forward tcp:9001
localabstract:chrome_devtools_remote
那样的授命,才能起首调剂,今后我们完可以解脱这么些麻烦的一声令下了。

付出机器安装ADB plugin是Chrome
28+之后的点子,差距于从前必要安装任何Android
SDK套件,同时活动装备要设置Chrome for Android
28+。ADB扩展程序安装成功后,Chrome菜单旁边会油可是生三个灰褐的Andr​​oid运营图标。

点击Android的图标,然后单击ADB先导。一旦ADB已经上马,菜单图标变成群青,并出示当前再三再四的配备的多寡,借使有连接装置的话。

 

澳门葡京 8

点击View inspection
Targets打开:列表中会呈现每种连接的配备及其选项卡页面。查找要调节的页面,并点击页面链接ULacrosseL旁边的inspect运营DevTools调试窗口。 

 

选择用DevTools特别首要性的少数是:假诺你点击inspect打开的DevTools窗口一片空白,且刷新无效时,那极有大概是由于被墙的原由,你能够尝试appspot.com是还是不是足以ping的通,倘使无法ping通,那你以往就先FQ吧(goagent
或红杏都不错,将appspot.com参预白名单),当然你还亟需有google账户。

 

增加补充说Bellamy(Bellamy)下,设若接上USB数据线后,没有展现此外连接的装备,请根据以下步骤排查:

● 检查你的装置连接到USB,检查USB数据线。


确认保证您的设备发生ADB设备命令列为可用。如果没有,检查是还是不是有你的装置上是或不是启用USB调节和测试。


即使Windows系统,检查你的USB驱动是不是安装正确。参考

● 桌面Chrome浏览器打开 chrome://inspect检查Discover USB devices是不是选中

● 确定保证桌面浏览器版本要超越运动设备的Chrome版本号

● 借使Chrome for
Android版本较低,请检查活动设备上Chrome浏览器设置,确认保证设置中启用USB调节和测试。高版本中无此设置项,无须设置。

● 倘诺仍旧无法展示,尝试再一次拔插USB数据线。

 

 

端口转载(Port forwarding)

 

您的无绳电话机和支出机器有时会处于四个例外的互连网(如本地服务器和线上服务器八个差别的网络环境),手提式有线电话机上大概获取不到支付环境的页面内容。况且,有时候你的开支条件处于集团由于安全原因管理控制范围下的互联网中。

 

Chrome For
Android中的端口转发搞定了这一不便,在表哥伦比亚大学上测试你付出的网站瞬变得简单。它的办事原理是在移动装备上创设八个监听TCP端口,该端口映射到支付机器特定的TCP端口,四个端口通过USB线路通讯,所以那种连接并不依靠于所处网络环境的铺排。

 

在进入正题前务须要提前证实搭建本地服务器必要小心的局部点。安装本地服务器,那里设置的是wamp集成包。一键安装实现后,需求修改Apache的一部分安装。

 

1. 开辟Apache安装目录下的陈设文件httpd.conf扩充监听两个端口。

 

  1. # Listen: Allows you to bindApache to specific IP addresses and/or  
  2. # ports, instead of the default. See also the <VirtualHost>  
  3. # directive.  
  4. #  
  5. # Change this to Listen on specific IP addresses as shown below to  
  6. # prevent Apache from glomming onto all bound IP addresses.  
  7. #  
  8. #Listen 12.34.56.78:80  
  9. Listen 80  
  10. Listen 8888  
  11.   
  12. Listen 8999  
  13. Listen 1818  

 

翻开Apache服务后可通过命令netstat –n –a查看所布署的端口是还是不是开启。

即使你本地环境也开启了IIS服务,为了制止双方都以用80端口产生争执,能够依照上述措施修改Apache的暗中同意端口。修改设置落成后别忘了重启Apache服务。

怎么转移IIS端口:若保留Apache服务与IIS服务同时运维,不想改变Apache默许80端口,那么只好变更IIS端口,方法如下:初阶->运维->输入:inetmgr->Internet音讯服务->本地电脑->网站->右键“默许网站”->属性->接纳“网站”标签->修改TCP端口即可。最终重复启航IIS服务。

 

2. 在httpd.conf文件中打开虚拟主机配置

 

  1. # Virtual hosts  
  2.   
  3. #Includeconf/extra/httpd-vhosts.conf  

将第2行前的#号去掉,就是为了允许加载扩张配置。

 

1. 
Apache服务器暗许的门径为设置目录下的htdocs,要是想更改暗中认可目录,能够修改httpd.conf文件下的DocumentRoot和Directory,修改两者路径到您钦命的目录即可。

  1. #  
  2.   
  3. # DocumentRoot: The directoryout of which you will serve your  
  4.   
  5. # documents. By default, allrequests are taken from this directory, but  
  6.   
  7. # symbolic links and aliasesmay be used to point to other locations.  
  8.   
  9. #  
  10.   
  11. DocumentRoot “E:/wamp/www/”  
  12.   
  13.    
  14.   
  15. #  
  16.   
  17. # This should be changed towhatever you set DocumentRoot to.  
  18.   
  19. #  
  20.   
  21. <Directory “E:/wamp/www/”>  

 

打开extra目录下的httpd-vhosts.conf配置文件,在文书最终地点分别为监听的端口设置虚拟主机目录

 

  1. #  
  2.   
  3. # Use name-based virtual hosting.  
  4.   
  5. #  
  6.   
  7. NameVirtualHost *:80  
  8.   
  9.    
  10.   
  11. #  
  12.   
  13. # VirtualHost example:  
  14.   
  15. # Almost any Apache directive may go into a VirtualHostcontainer.  
  16.   
  17. # The first VirtualHost section is used for all requests that donot  
  18.   
  19. # match a ServerName or ServerAlias in any <VirtualHost>block.  
  20.   
  21. #  
  22.   
  23. <VirtualHost *:80>  
  24.   
  25.     ServerAdminwebmaster@dummy-host.example.com  
  26.   
  27.     DocumentRoot “E:/wamp/www /dummy-host.example.com”  
  28.   
  29.     ServerName dummy-host.example.com  
  30.   
  31.     ServerAliaswww.dummy-host.example.com  
  32.   
  33.     ErrorLog”logs/dummy-host.example.com-error.log”  
  34.   
  35.     CustomLog”logs/dummy-host.example.com-access.log” common  
  36.   
  37. </VirtualHost>  
  38.   
  39.    
  40.   
  41. <VirtualHost *:80>  
  42.   
  43.     ServerAdminwebmaster@dummy-host2.example.com  
  44.   
  45.     DocumentRoot”E:/wamp/www”  
  46.   
  47.     ServerName localhost  
  48.   
  49.     ErrorLog”logs/dummy-host2.example.com-error.log”  
  50.   
  51.     CustomLog”logs/dummy-host2.example.com-access.log” common  
  52.   
  53. </VirtualHost>  
  54.   
  55.    
  56.   
  57. <VirtualHost *:8888>  
  58.   
  59.     ServerAdminprograms@dummy-host2.example.com  
  60.   
  61.     DocumentRoot”E:/wamp/www/programs”  
  62.   
  63.     ServerName localhost  
  64.   
  65.     ErrorLog”logs/programs-host2.example.com-error.log”  
  66.   
  67.     CustomLog”logs/programs-host2.example.com-access.log” common  
  68.   
  69. </VirtualHost>  
  70.   
  71.    
  72.   
  73. <VirtualHost *:8999>  
  74.   
  75.     ServerAdminprograms@dummy-host2.example.com  
  76.   
  77.     DocumentRoot”E:/wamp/www/site”  
  78.   
  79.     ServerName localhost  
  80.   
  81.     ErrorLog”logs/programs-host2.example.com-error.log”  
  82.   
  83.     CustomLog”logs/programs-host2.example.com-access.log” common  
  84.   
  85. 澳门葡京,</VirtualHost>  
  86.   
  87.    
  88.   
  89. <VirtualHost *:1818>  
  90.   
  91.     ServerAdmin webapp@dummy-host2.example.com  
  92.   
  93.     DocumentRoot”E:/wamp/www/webapp”  
  94.   
  95.     ServerName a.test.com  
  96.   
  97.     ErrorLog”logs/webapp-host2.example.com-error.log”  
  98.   
  99.     CustomLog”logs/webapp-host2.example.com-access.log” common  
  100.   
  101. </VirtualHost>  

里面a.test.com若要生效还亟需在地面host文件中扩张映射关系:127.0.0.1
a.test.com

下一场大家测试一下,在浏览器输入你安插的主机名和端口号,url指向你要打开的文本。

 

澳门葡京 9

 

若出现上述提醒,检查你的虚拟主机目录是不是正确。借使目录设置科学,即可打开页面。

 

 澳门葡京 10

貌似景况下目录访问权限暗中认可为:

  1. #  
  2.   
  3. # First, we configure the”default” to be a very restrictive set of  
  4.   
  5. # features.   
  6.   
  7. #  
  8.   
  9. <Directory />  
  10.   
  11.     Options FollowSymLinks  
  12.   
  13.     AllowOverride All  
  14.   
  15.     Order deny,allow  
  16.   
  17.     Deny from all  
  18.   
  19. </Directory>  

 

重重人为了便利直接设置为

 

  1. #  
  2.   
  3. # First, we configure the”default” to be a very restrictive set of  
  4.   
  5. # features.   
  6.   
  7. #  
  8.   
  9. <Directory />  
  10.   
  11.     Options FollowSymLinks  
  12.   
  13.     AllowOverride All  
  14.   
  15.     Order allow ,deny  
  16.   
  17.     Allow from all  
  18.   
  19. </Directory>  

 

是因为安全考虑,依照调节和测试的人手和实在须要,小编个人倾向于为一定目录设置分裂的权杖,示例如下:

 

  1. #  
  2.   
  3. # First, we configure the”default” to be a very restrictive set of  
  4.   
  5. # features.   
  6.   
  7. #  
  8.   
  9. <Directory />  
  10.   
  11.     Options FollowSymLinks  
  12.   
  13.     AllowOverride All  
  14.   
  15.     Order deny,allow  
  16.   
  17.     Deny from all  
  18.   
  19. </Directory>  
  20.   
  21.    
  22.   
  23. <Directory “E:/wamp/www/webapp”>  
  24.   
  25.     Options FollowSymLinks  
  26.   
  27.     AllowOverride All  
  28.   
  29.     Order deny,allow  
  30.   
  31.     Deny from all  
  32.   
  33.     Allow from 192.8  
  34.   
  35. </Directory>  
  36.   
  37.    
  38.   
  39. <Directory “E:/wamp/www/programs”>  
  40.   
  41.     Options -Indexes FollowSymLinks  
  42.   
  43.     AllowOverride All  
  44.   
  45.     Order deny,allow  
  46.   
  47.     Deny from all  
  48.   
  49.     Allow from 192.8.102. 192.8.104. 192.8.22.  
  50.   
  51. </Directory>  

 

设置达成后重启Apache服务生效。

康宁是高枕无忧了,但是有三个难点,访问localhost下的页面会产出那样的事态:

 

澳门葡京 11

 

实际大家再扩大一句 Allow from127.0.0.1 ::1 localhost
即可消除此题材。如下:

 

  1. <Directory “E:/wamp/www/programs”>  
  2.   
  3.     Options -Indexes FollowSymLinks  
  4.   
  5.     AllowOverride All  
  6.   
  7.     Order deny,allow  
  8.   
  9.     Deny from all  
  10.   
  11.     Allow from 192.8.102. 192.8.104. 192.8.22.  
  12.   
  13.     Allow from 127.0.0.1 ::1 localhost  
  14.   
  15. </Directory>  

 

重启再试,页面寻常呈现出来了。如下图:

澳门葡京 12

 

现今搭建好了当地服务器,开启了多少监听端口,进入正题,接着说端口转载。

 

要选取端口转载(Port forwarding)功用,须求满意以下原则:

 

1.      在开发机器的Chrome浏览器打开chrome://inspect

2.      点击PortForwarding,弹出设置窗口

澳门葡京 13

 

3.      在设施端口输入框,填写移动装备要监听的端口号(默许为8080)

4.      在Host主机输入域,填写运维web应用的当下ip地址(或主机名称,如localhost)加端口号。IP地址可以填充开发机器可访问的任什么地点方地址。当前,端口号范围必须在1024~65535之间(包括)

5.      选中Enableport forwarding.

6.      点击Done完成。

澳门葡京 14

 

当chrome://inspect窗口的端口号闪动为煤黑时,评释该端口转载配置已奏效。此时您能够在移动设备上开辟当地页面进行调节了。

在Chrome29事先端口转载成效有限,若是遭受难题,请保管您的Chrome版本升级到29以上再利用。在Chrome31+端口转载已经不是试错性功用了,而是规范公告的职能了。

 

前面大家已经搭建好地方服务器环境。接上USB线,打开chrome://inspect/#devices,根据Apache所设的监听端口,设置相应DevTools的端口转载参数,如下图:

 

 澳门葡京 15

 

形成了端口转载的设置后,那时候我们就足以开始展览调剂本地环境下的页面了。

输入url,打开当地的页面。

例如

http://localhost:1818/taskmarket/index.html

 

正如图所示:

 

澳门葡京 16 

 

虚拟主机映射(Virtual hostmapping)

 

当您在localhost域名(或你的本土开发机器IP)下调节和测试,端口转载很管用。不过,要是您要运用自身定制的地点域名来调节那就不管用了。

假若你在采取1个仅能运作于特定白名单中的域名下的JavaScriptSDK,因而你在host文件中装置了如127.0.0.1
xxx.com如此的附和关系。只怕你在Web服务器(MAMP,wamp,xampp等)用虚拟主机配置了天性的域名。

 

若是想让活动装备呈现特定域名下页面内容,你要求使用上述的端口转载技术和代理服务器技术来贯彻。代理服务器能够将活动设备上的呼吁映射到主机的正确地方。

 

搭建代理

 

时下有为数不少搭建代理服务器的工具,比如Mac上的查理Proxy,在Windows系统下的Fiddler,Linux下的Squid
cache,Squid作为一款开源的代办服务软件,也可以用作Web缓存服务器,达成连忙的Web访问必要。主机上设置运营代理服务器,全数来自安卓移动设备的哀求都将会转接到代理服务器。

 

代理服务的搭建方法那里不细说看,感兴趣的能够参考作者的稿子或活动物检疫索。

 

端口转载代理设置的手续:

 

1.  装置代理服务软件,在主机上搭建代理服务器。

2. 
打开代理服务,并确定保证代理服务器运转的端口与Chrome端口转载所设端口分化。

3.  Chrome浏览器打开“检查装置”chrome://inspect

4.  点击Port forwarding 弹出设置窗口。

5.  装备端口处填上安卓设备要监听的端口,如7000。

6. 
主机IP处可以填充localhost:xxxx,比如localhost:8000,也足以填充本身下边配置过的本地域名a.test.com:1818

7.  勾选 Enableport forwarding

8.  点击Done按钮实现参数配置。

澳门葡京 17

 

移步装备代理服务参数设置:

1.  开拓设置-WLAN(Settings> Wi-Fi

2.  长按时下总是的无线网络(代理服务设置适用于种种有线互连网)

3.  点击修改互联网(Modify network

4.  勾选高级选项(Advanced options),将显得设置项:

 

澳门葡京 18 

5.  点击“代理”(Proxy)菜单选取“手动”(Manual

6. 
在“代理服务器主机名”( Proxyhostname)处输入localhost或者127.0.0.1

7.  在“代理服务器端口”(Proxy port)处输入端口号,如八千

8.  点击保存(Save)。

透过上述参数设置,移动装备上存有请求被转正到主机的代理服务器,代理服务器代表安卓移动设备来发送请求,使得发送到特定域名下的伸手获得了客观的剖析。未来你可以调节和测试特定域名下的页面了。

 

 

澳门葡京 19

 

在意:为了不影响移动装备健康上网浏览,断开USB数据线后一定要还原代理设置。

Fiddler私下认可使用8888端口,我的本地服务器已经占据8888端口,所以在Fiddler-Tools菜单军长监听端口设为未利用的一千0端口,如图:

澳门葡京 20

 

手提式有线电话机端代理设置参数落成后,打开ChromeDevTools进行调剂。点击inspect能够看到页面呈现在妹夫大浏览器了,以后伊始调节和测试吧。

自身的测试页面为

澳门葡京 21

 

DevTools实例的调剂截图如下:

 

澳门葡京 22 

手提式有线电话机端Chrome for Android中的实时截图如下:

 

 澳门葡京 23

注意主机要和活动装备处在同一网段的局域网内。

有题指标童鞋可以留言或查看自身博客的别样有关小说。
Chrome远程调节和测试部分就到此地了。移动端的调节和测试还一直不终结,下一节小编会介绍Weinre远程调节和测试的技术和详细教程。

转发请表明出处: 
freshlover的CSDN专栏小说《移步端Web开发调节和测试之Chrome远程调节和测试(Remote
Debugging)》 

参照作品:Remote Debugging on Androidwith
Chrome 

 

vue-devtools

品种刚在chrome中运营起来,打开属性检查器,就在控制台,到那个警示:

澳门葡京 24

告诫:vue-devtools没有安装

其一警示是提议设置Vue官方提供的调剂工具vue-devtools,那个浏览器插件不是必须设置的,只是当作3个调剂的援救,能够查阅Vue组件的变量和章程音讯、Vue层级结构、Vuex的time-travel
调节和测试、监听组件事件

Chrome安装

  1. 翻墙,打开Chrome网上应用店,搜索vue-devtools

  2. 添加至Chrome

澳门葡京 25

添加vue-devtools至Chrome

  1. 勾选隐秘方式、允许访问文件

澳门葡京 26

勾选隐秘情势

  1. 重启Chrome,运营项目,打开属性检查器 cmd + option + i
    ,查看Vue组件音讯

澳门葡京 27

翻看Vue组件消息

Safari安装

  1. 克隆vue-detools项目:https://github.com/vuejs/vue-devtools

  2. 打开终端运行以下命令

    //cd 到本地项目目录
    // 初始化依赖库 (如果使用yarn 则运行 yarn install)
    npm install
    // 编译
    npm run build:safari
    
  3. 开辟Safari-偏好设置-高级-在菜单栏突显“开发”菜单

澳门葡京 28

显示“开发”菜单

  1. 开辟Safari菜单栏“开发”-显示增加创制器

澳门葡京 29

显示扩展创设器

  1. 慎选左下角添加扩张

澳门葡京 30

左下角添加增加

  1. 采用品种目录 shells/safari/Vue.js devtools.safariextension

澳门葡京 31

选料品种目录

  1. 点击右上角安装,安装完结重启Safari

澳门葡京 32

安装vue-devtools_Safari

  1. 运文章种查看Vue组件消息

澳门葡京 33

查阅Vue组件音信

Firefox安装

  1. 打开Firefox附加组件:https://addons.mozilla.org,搜索vue-js-devtools,添加到Firefox,地址:https://addons.mozilla.org/zh-CN/firefox/addon/vue-js-devtools/?src=ss

澳门葡京 34

搜索vue-js-devtools

  1. 点击安装

澳门葡京 35

点击安装

  1. 重启Firefox,运营品种,打开属性检查器 cmd + option +
    i,查看Vue组件音讯

澳门葡京 36

翻开Vue组件音信

能够在Activity的init进行如下设置,WebView类包蕴多少个公家静态方法,可选拔于项目中的全体WebView,同时不受Manifest文件中的debuggable属性影响。

Android 4.4 初步,使用 Chrome 开发者工具得以帮助大家在原生 Android
应用中国远洋运输总集团程调节和测试 WebView 网页内容。一起来探视怎么操作吧。

移动端调节和测试

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

率先步,设置 WebView 调节和测试方式。WebView 类包罗1个公共静态方法,作为
Debug 开关:

Chrome DevTools

适用于Android设备。

调剂iOS设备很鸡肋,安装完插件之后要依靠于iOS
的Safari浏览器打开页面才能够调节,想用它在iOS设备上调节的意中人赶到此处:https://github.com/google/ios-webkit-debug-proxy

调节安卓的手续

  1. Android端在安装中的开发者选项打开USB调节和测试

澳门葡京 37

打开USB调试

  1. 连接到PC端,允许USB调试

澳门葡京 38

允许USB调试

  1. 担保PC上安装的Chrome为32及更高版本,并且PC端的Chrome版本要高于Android端的版本

澳门葡京 39

Chrome为32及更高版本

  1. 在Android 端打开测试页面,在PC端 Chrome
    打开地址:chrome://inspect/#devices

  2. 勾选“Discover USB
    devices”,看到下方监听到的Android端的一个浏览器:“Chrome
    (58.0.3029.83)” 和 “WebView in com.android.browser
    (53.0.2785.146)”。笔者试验四个浏览器,不过Chrome
    DevTools只好监听到Chrome、Android(我测的是Samsung)系统自带浏览器打开的页面,不协助App内嵌的WebView、QQ浏览器、Firefox、Opera等浏览器页面

    比方急需调节和测试App内嵌的WebView,需求Android代码中安装调节和测试帮忙

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        WebView.setWebContentsDebuggingEnabled(true); 
    }
    

澳门葡京 40

移步端调节和测试_Android

  1. 点击“inspect”,进入调节和测试页面

澳门葡京 41

调节页面

跻身调节和测试页面之后,恐怕出现空白页面,那意况有大概是被墙了,须求翻墙后再试,Mac中相比较好用的翻墙工具有:Lantern、SuperVPN

(2)调试WebView

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { WebView.setWebContentsDebuggingEnabled;}

Safari Web Inspector

适用于iOS设备的Safari浏览器的页面调节和测试

操作步骤

  1. Mac端:Safari → 偏好设置 → 高级 → 勾选在菜单栏中突显“开发”菜单

澳门葡京 42

在菜单栏中体现“开发”菜单

  1. iOS端:设置 → Safari → 高级 → 打开Web 检查器

澳门葡京 43

打开Web 检查器

  1. 数据线连接iOS设备和Mac

  2. 在iOS设备的Safari中开辟供给测试的页面

澳门葡京 44

打开必要测试的页面

  1. Mac端:菜单-开发-选用iOS设备名-选取须求测试的页面

澳门葡京 45

采纳iOS设备和页面

澳门葡京 46

Safari调试页面

USB连接设备的前提下,PC打开Chrome浏览器,输入:

注意:那几个格局包容至 Android 4.4
及更高版本,并且只需安装三遍,便可选取于项目中的全部 WebView,同时不受
Manifest 文件中 debuggable 属性的震慑。

Eruda

这才是运动端的调节和测试神器,Eruda
和另向外调拨运输试工具的界别是,它是2个类型插件,独立运转于运动设备,不须求连接到PC。而且Eruda具有这一个强大力量,差不多不逊色于桌面端调节和测试:捕获
Console
日志、查看页面源码、查看标签内容及质量、图表呈现页面加载速度、查看页面加载脚本及体制文件。

经验通过数据线调节和测试和透过WiFi远程调节和测试之痛的本人(动不动就要考虑iOS照旧Android、微信内打开还是浏览器打开、内网照旧外网、繁琐的安顿),真心觉得Eruda仅仅二个简易的Console功用就让作者尤其满足了!

Eruda官网demo地址:http://eruda.liriliri.io/

澳门葡京 47

Eruda官网demo地址

引入格局

通过CDN使用:

<script src="//cdn.bootcss.com/eruda/1.2.4/eruda.min.js"></script>
<script>eruda.init();</script>

通过npm安装:

npm install eruda --save

在页面中加载脚本:

<script src="node_modules/eruda/eruda.min.js"></script>
<script>eruda.init();</script>

在Vue中加载:

import eruda from 'eruda'
created: function () {
    var el = document.createElement('div')
    document.body.appendChild(el)
    eruda.init({
    container: el,
    tool: ['console', 'elements']
   })
}

Js文件对此运动端的话略重(gzip后大概80kb)。可以透过url参数来支配是还是不是加载调试器,比如:

;(function () {
    var src = 'node_modules/eruda/eruda.min.js';
    if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
    document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
    document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
})();

开端化时方可流传配置:

  • container:
    用于插件开端化的Dom元素,假若不设置,暗许成立div作为容器直接置于html根结点上边。
  • tool:钦定要开始化哪些面板(有那么些采用:console、elements、network、features、resources、sources、info、snippets),默许加载全体。

var el = document.createElement('div');
document.body.appendChild(el);

eruda.init({
    container: el,
    tool: ['console', 'elements']
});
chrome://inspect/#devices

第贰步,确定保证 USB 连接的前提下,打开 PC 中的 Chrome
浏览器,输入网址,打开页面:

spy-debuger

spy-debuger是2个用于远程调试手提式有线电话机网页、抓包的PC端工具,号称能够独当一面任何活动端webview(手提式有线话机、微信,HybirdApp等),帮衬HTTP/HTTPS。但实在,在微信中调剂并倒霉用,微信会屏蔽消息监听。

Mac安装

sudo npm install spy-debugger -g

Windows安装

npm install spy-debugger -g

使用

  1. 管教手提式有线电电话机和PC在同样网络下(就像是时连到贰个Wi-Fi)

  2. 终极运转 spy-debugger

澳门葡京 48

终端运营 spy-debugger

  1. 设置手提式有线电话机的HTTP代理,代理IP地址设置为PC的IP地址,spy-debugger开发银行后的唤起地址为:192.168.199.166
    端口为:9888。

    • Android设置代理步骤:设置 - WLAN - 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动
    • iOS设置代理步骤:设置 - 无线局域网 - 选中网络 - HTTP代理手动
  2. 手提式有线电电话机安装证书。

    注:手提式有线电话机必须先安装完代理后再经过(非微信)手提式有线电话机浏览器访问http://spydebugger.com/cert
    安装证书
    (手提式有线话机第三遍调节和测试须求安装证书,已安装了证书的无绳电话机无需再次设置)。问题:iOS
    10.3.1上述版本证书安装难点

    依然扫描二维码安装证书(先安装代理)

澳门葡京 49

手提式无线电话计算机扫描描二维码安装证书

  1. 手提式有线电话机访问网页,遵照spy-debugger启航后的提醒,在PC上开辟调节和测试页面,那里地址是:

    调节和测试音讯如下:

澳门葡京 50

调节和测试消息

控制台:

澳门葡京 51

控制台界面

抓包:

澳门葡京 52

抓包界面

自定义选项

  • 修改端口

(暗中认可端口:9888)

spy-debugger -p 8888

  • 设置外部代理(私下认可使用AnyProxy)

spy-debugger -e
spy-debugger内置AnyProxy提供抓包成效,然则也可经过设置外部代理和别的抓包代理工具一起行使,如:查尔斯、Fiddler。

  • 设置页面内容为可编写制定方式

该功效使页面内容改动特别直观方便。 (私下认可: false)

spy-debugger -w true
里头贯彻原理:在须要调剂的页面内注入代码:document.body.content艾德itable=true。暂不协助选用了iscroll框架的页面。

  • 是不是允许weinre监控iframe加载的页面

(默认: false)

spy-debugger -i true

  • 是不是只拦截浏览器发起的https请求

(默认: true)

spy-debugger -b false
有点浏览器发出的connect请求没有科学的带入userAgent,这一个论断有时候会出错,如UC浏览器。那个时候必要设置为false。大部分意况提议启用私下认可配置:true,由于近年来大气App应用本人(非WebView)发出的呼吁会动用到SSL
pinning技术,自定义的证书将无法透过app的阐明校验。

  • 是不是允许HTTP缓存

(默认: false)

spy-debugger -c true

DevTools页面包车型地铁Devices会突显当前接连的长途设备名称和连串号,以及当前原生App打开的WebView的网页地址,如图:
澳门葡京 53

chrome://inspect

(3)修改H5页面情节
点击inspect选项进入开发者工具页面,能够修改html页面包车型客车html、js代码。
澳门葡京 54

DevTools 页面包车型大巴 Devices
菜单页自动显示当前连连的远程设备名和类别号,以及当前原生 App 打开的
WebView 的网页地址,如图:

重点:
html代码:Elements直接修改,马上见效;
js:须求console修改js并交付才生效。

澳门葡京 55

点击对应网页下方的 inspect 选项便足以进去开发者工具页:

澳门葡京 56

如图所示,网页展现内容和源代码、控制台等都足以见见,供安卓开发职员自由调试。

实质上,Chrome 开发者工具也是 H5 开发人士开发手提式有线电话机端网页的调节利器。

开辟 PC 中 Chrome 浏览器的开发者工具页面:设置 -> 越多工具
-> 开发者工具,大概直接在 Chrome 浏览器的随意网页上右键选用
检查。在开发者工具依照下图形式中开辟 Remote devices

澳门葡京 57

平等,确定保障 PC 通过 USB 连接手提式有线电话机配备的前提下,检查开启 Remote devices
页面右边 Settings 菜单中的 Discover USB devices 选项:

澳门葡京 58

打开手提式无线电话机的 Chrome 浏览器 App,在 Remote devices
中选择相应的手提式有线电话机设备,便得以见见方今 Chrome App 的版本消息,以及贰个 U凯雷德L
输入框:

澳门葡京 59

在此,大家得以输入随机的 Url 地址,点击 Open,便可一并打开手机Chrome 上的网页,同时在 Remote devices
出现对应的地址栏,点击即可进入前边介绍 WebView 时所观看的接近调节和测试页。

越多关于 Chrome DevTools 的底细,请参见链接:Chrome DevTools for Mobile:
Screencast and Emulation。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website