• 手机上Webview及html5页面调试方法 (Chrome DevTools调试移动设备Brower PageTabs/WebViews)

    文章编写背景:

    本来呢,开发html5页面用浏览器的调试模式就非常的方便,在浏览器里按F12键就可以立即调试,找出布局的问题,以及log输出。但是偏偏把页面放在手机或平板里运行,总有不对劲的地方。就拿Android设备来说,6.0的系统都显示的很好,但是在5.1的系统里面各有各的布局差错。很郁闷。

    然后看到博客说chrome有调试功能,可以调试装在Android设备上的chrome浏览器以及Android的WebView。真是救命稻草呀,很轻松的就解决了一天没有解决的问题。因为这个工具帮你快速的定位到问题。

     

    (Chrome DevTools调试移动设备Brower PageTabs/WebViews)

     

    使用方法:

    电脑里面得chrome浏览器,尽量是最新版本。

    用数据线连接手机并启动调试模式(对于开发人员来说这是基本需求,不多记录)

    在chrome浏览器地址栏输入chrome://inspect 或者about:inspect

    就会出现如下界面。这里我的手机打开了一个内嵌的webview,显示如下。


    点击inspect即可进入调试界面:

    注意一般你会发现出现一个空白的界面,无法显示内容。那么很高兴的告诉你,你需要(fan)(qiang),即你需要能访问google才可以使用此功能,注意哟!!!

     

    至于调试使用体验,那是非常的好。



    展开全文
  • 在PC端上,可以在浏览器上调试代码,那在移动端的真机上如何调试呢? 在android机上调试前端页面的步骤参考该文章:https://www.2cto.com/kf/201505/398827.html
  • 调试Android H5页面的时候时候Chrome自带的“Chrome://inspect”工具调试时,国内用户都面临翻墙的问题。 不翻墙,实现chrome浏览器调试工具的时候,就是本文分享的重点(^U^)ノ~YO!!!! 操作如下: 1、...
  • 1. 前言移动端网页开发,最头疼的就是调试了,谷歌Chrome支持远程连接Android设备,调试WebView中打开的页面。2. 准备工作Android开发环境(adb工具)一个Android设备,在PC安装好驱动(如果需要),开启调试模式,...
  • android在4.4版本及以上,使用了Chromium作为webView的内核支持,这也使得我们可以在pc端的chrome浏览器对运行在webView里的html进行调试,首先要在webView设置中加如下代码 if(Build.VERSION.SDK_INT >= Build....
  • Android WebView 调试方法 2018-04-09 18:18:17
    调试Android WebView中的h5页面,本人通常就是通过alert来定位问题,效率低且无法直接调试样式或打断点,可谓是事倍功半。本文介绍一下我在项目中使用的新方法,能够通过chrome的开发工具在原生 Android 应用中调试 ...
  • Android APP开发之真机调试环境实现视频教程,该课程会为大家讲解如何实现在Android真机上调试自己的项目,实现eclipse与真机的整合使用。 同样该教程会为大家讲解Android开发环境的各种坑以及如何解决,让大家可以...
  • Android开发者第一步学习的应该就是真机调试了。但是很多初次接触android studio的同学还是不知道如何用真机调试,今天我就给大家写一个教程,希望可以帮到需要的人。 我使用的是一款国家电网定制机型。Android版本...
  • 现在原生app中混合web页面这种方式用的场景越来越多,app的原生代码很容易使用android studio进行debug调试,web页面在Chrome浏览器中F12打开开发者工具,也非常方便调试web页面。但是嵌入在app中的web页面如何调试...
  • 开发PC页面的时候使用chrome浏览器的开发者工具,可以很容易的捕获到页面的dom元素,并且可以修改样式,方便调试,但是手机上却很麻烦,因为手机上没有办法直接打开开发者工具查看元素。其实可以通过将设备连接到PC...
  • Eclipse中调试Android技巧 2013-12-20 17:39:47
    Android eclipse中程序调试 一:断点调试 用eclipse开发android程序的时,跟VS一样是可以断点单步调试的. 步骤如下. 1 设置断点:在编码窗体的左边框上用鼠标双击,或者右键点击菜单,选择 Toggle Breakpoint...
  • Android蓝牙调试助手 2019-09-20 11:20:48
    PS:最近一直在搞Android上的蓝牙应用,每次在PC上调试蓝牙设备中的数据还可以,但是在Android手机上就非常不方便,所以自己写了个简单的Android蓝牙调试助手,希望各位下载使用,如有问题和Bug跟贴。 源码下载...
  • 这里可以通过在电脑上安装一个Android模拟器,然后结合Chrome的devices远程设备功能,进行移动端页面的开发和调试安装模拟器mac上面的Android模拟器可选择的比较少,且性能不太好,这里推荐夜神Android模拟器 ...
  • 最近想用PC端调试微信内置浏览器页面,于是使用Chrome进行调试,步骤如下:1.手机数据线连接电脑,开启手机上的USB调试功能2.打开Chrome浏览器,在地址栏输入:chrome://inspect/#devices访问3.Chrome会自动检测并列...
  • 如何在浏览器中调试Android的WebView 前言:遇到问题或想学习更多Android知识,请搜索微信公众号“Android唐浮” 一、在Android中设置允许调试 在加载WebView的Activity的onCreate中添加代码;该步骤是开启WebView...
  • 通常情况我们调试移动端页面最常用的方法就是:切换pc端浏览器的userAgent来模拟手机或其他移动设备调试页面 然后用手机打开要调试页面 刷新页面查看调试结果但是这就存在两个问题 在pc浏览器模拟手机可能造成调试...
  • 这一篇是调试两种设备上的浏览器页面(不是应用中的 Webview),等我研究明白了怎么调试应用中的 Webview 会再写一篇。 Android 参考:使用Chrome://inspect调试 Android 设备上Webview 注意: 调试安卓设备的...
  • 如何调试 Android 手机网页 2015-05-21 15:52:07
    哈哈,这样的开场白太那个了……其实实不相瞒,俺的实际情况是,到项目后期才懂得那么一点页面调试手段,之前怎么弄……不怕见笑,还是 console.log/alert 几招,甚至几招都算不上,,好原始的说……嗯,少废话,来...
  • 调试是软件开发过程中很重要的环节,它能帮助开发者快速的定位和解决开发过程中碰到的问题。对于HTML5的开发,大家都知道Chrome的DevTools工具有强大的功能和友好的用户体验,不仅能快速方便调试JavaScript、检查...
  • android连接智能电视调试 2019-07-11 10:18:32
    最近要弄一个在电视上玩的小游戏,需要Android添加登录及套壳游戏页面,所以要连接电视进行调试,新买的测试电视是小米4c。但电脑是air没有连接电视的线。幸好可以直接用adb连接调试。步骤如下 1、打开电视的开发者...
1 2 3 4 5 ... 20
收藏数 39,581
精华内容 15,832