最近需要使用 Chrome Developer Tools 调试 Android 浏览器,但是官方指南并不是很好使,经过一番折腾,终于调试成功了,在此把经验分享给需要的朋友. Chrome Developer Tools 是前端工程师必不可少的工具,它极大的提高了我们的开发调试效率.在移动开发的时代,我们也必须掌握手机浏览器在 Chrome 中调试的方法.本篇仅介绍 Android. 环境 不同的环境可能存在一些差异,我的环境是: Windows 10 电脑 Chrome 50.0.2661.7…

准备工作 1, 桌面版chrome 2, Android设备(安装有chrome浏览器) 3, Android-sdk Android-sdk安装及设置 SKD安装 从http://developer.android.com/sdk/index.html下载android-sdk开发包,安装后,执行SDK Manager.exe,安装android SDK Platform-tools工具包. 环境变量配置: 在环境变量添加path,并添加路径<sdk>/platform-tools; 添加后…

Android 借助Stetho在Chrome上调试Android网络.数据库.Sharedpreferences 转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/61919840 本文出自[赵彦军的博客] 简介 Stetho是Facebook开源的Andorid调试工具.当你的应用集成Stetho时,开发者可以访问Chrome,在Chrome Developer Tools中查看应用布局,网络请求,sqlite,preferen…

学校的毕业论文系统,无法完整显示网页,特别是下部的"提交"按钮看不见. IE11无效. 发现"360极速浏览器 7.5.3.186"能正常显示,百度网盘下载太慢,且超过30M就要下客户端,麻烦. https://www.lanzous.com/b711952/ 密码:456 (先读说明文件"在Chrome中使用IE浏览器打开网页.docx") 其他链接: https://www.lanzous.com/b697267 密码:123…

网上的帖子很多,但很多都是老版本的,试过了,根本不管用,花了一天时间,终于在本机试验通过了,特记录下来,以备用.有需要的朋友也可以参考.先上一张图,看看PC端chrome上调试的效果: 左边是手机的模拟操作器,右边是大家熟悉的开发人员工具,也可以在手机上操作,PC端左边屏幕会同步到手机上的界面. 下面再说一下环境配置: 1.手机端,我手机是华为荣耀4,android4.4.4,很旧的手机了,大家别笑话,但不影响本次试验.安装chrome版本为58.0.3029.83: 2.PC端,win7 64…

手机浏览器是没有开发者工具的,所以调试手机网页是非常麻烦.使用 chrome 的远程调试功能可以像调试桌面端那样调试手机页面. 准备 手机端:chrome for Android, 安装谷歌浏览器 桌面端:谷歌浏览器,版本建议大于手机端的,最好使用 chrome canary USB 连接线, 也就是你充电器的那条线 开启调试模式 使用 USB 连接你的电脑,并开启调试模式. 使用 android 4.2 或以上的手机可能没有调试模式选项,可以找到 “设置 > 关于手机 > 版本号(Build…

一直使用chrome中内置的调试器, 感觉世界那么美好, 自从学了react之后,使用visual code作为编辑器, 它提供了很多插件, 其中就包括debugger for chrome, 一款使用内置调试器来调试浏览器中网页的插件.于是打算折腾一下试试. 踩了很多坑, 配置lanuch.json, 运行一直失败, 原因就是因为该项目是由webpack构建, 需要先启动项目, 然后再启动调试器 1. 启动项目 npm start 只有项目启动后, 配置的lanuch.json才有效!!! 2…

ios +chrome调试 引用https://segmentfault.com/a/1190000015428430 iTunes ios-webkit-debug-proxy-1.8-win64-bin.zip chrome最新版本最好 [Chrome]对ios-safari移动端的H5页面进行调试(ios-webkit-debug-proxy) ios 有问题. 点击Inspect,弹出开发者工具 后  不显示 手机的页面 ,代码已出现. 后期好了更新 调试Android上WebView的…

Android eclipse中程序调试 一:断点调试 用eclipse开发android程序的时,跟VS一样是可以断点单步调试的. 步骤如下. 1 设置断点:在编码窗体的左边框上用鼠标双击,或者右键点击菜单,选择 Toggle Breakpoint菜单项即可. 2 在debug模式下运行程序进入调试状态:通过点击工具栏上的小虫按钮或者是在项目右键点击然后选择Debug As,Android Application菜单,启动程序的调试模式. 第一次运行调试模式eclipse会弹出如下确认窗口 当…

先决条件 你必须安装好 Chrome 和 VS Code.同时请确保自己在 VS Code 中安装了 Debugger for Chrome 扩展的最新版本. 请通过 Vue CLI,遵循它的 README 中的安装文档安装并创建一个项目.然后进入这个新创建的应用的目录,打开 VS Code. 在 Chrome Devtools 中展示源代码 在可以从 VS Code 调试你的 Vue 组件之前,你需要更新 webpack 配置以构建 source map.做了这件事之后,我们的调试器就有机会将…

(1) 手机要满足Android系统为4.4或更高版本,低版本不支持这种方式.(2) 确保App已经开启了webview的debug调试模式,由Android工程师协助.(2) 用usb数据线连接好手机与电脑.(3) 将手机中的 设置 - 开发人员工具 - USB调试功能打开.(4) 打开chrome://inspect/#devices,即单击chrome右上角控制按钮 - 更多工具 - 检查设备 - 勾选上 Discover USB devices(5) 在app中访问一个web页面,对应的…

1.搭建php本地运行环境具体点击如何使用phpstudy本地搭建多站点(每个站点对应不同的端口) 2.下载php_xdebug.dll, [5.3版以上的php下载地址]http://pecl.php.net/package/xdebug [5.3版及其以下的php下载地址]http://pecl.php.net/package/xdebug/2.2.7/windows 注意版本要对应,不然可能会不能用.   3.安装php xdebug扩展(即在配置php.ini文件加入以下代码) [XDe…

下载最新的google chrome canary 手机chrome开启usb网页调试,如图所示: 在终端运行 ? SHELL adb forward tcp:9222 localabstract:chrome_devtools_remote /Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --remote-debugging-port=9222 --remote-debugging-p…

引 入依赖包 compile 'com.facebook.stetho:stetho:1.3.1' 初始化一下 public class MyApplication extends Application { public void onCreate() { super.onCreate(); Stetho.initializeWithDefaults(this); } } 运行App, 打开Chrome输入chrome://inspect/#devices(别忘了用数据线把手机和电脑连起来哦)…

今天出现一个问题,在老板的Mate9 Pro上,我们APP的所有H5页面都是一片空白,但是在其他手机上都是好的,那么我们就怀疑是h5报错了,但是到底是什么错,无法得知,所以就想要可以像在pc的chrome这样调试android webview的h5页面就好了,折腾了一个晚上,终于找到了一篇基本可用的教程 android webview远程调试,然后又发现运来在chrome的官方文档文档中也有描述 远程调试 Android 设备使用入门. 一.简要步骤: 1)首先在安卓手机上打开手机的开发者模式,…

在Chrome+Visual Studio中调试asp.net程序很慢的问题(Firefox也有类似问题) 今天开始起在Chrome中调试,发现问题主要出在菜单栏(layout文件)中,google了一番,查到很多原因,不过最终解决方法倒是很简单,特此分享一下: 在C:/Windows/System32/drivers/etc里边有一个hosts文件,用记事本打开,里边最后几行原来是: # localhost name resolution is handled within DNS itsel…

Chrome中调试网站,会出现 这是由 crxMouse Chrome™ 手势 引起的,关闭即可…

Android 浏览器内 H5 调试 chrome://inspect 移动前端调试方案(Android + Chrome 实现远程调试) adb 相关资源 adb shell(ADB Kits)下载地址: http://adbshell.com/downloads 打开 开发者模式 设置 关于手机 版本号,点击 5 次 返回 设置列表,列表中多了 其他设置 选项 进入 其他设置 开发者选项 调试 -> USB调试 开启即可 进入 调试模式 安装 debug 版本的 浏览器 到测试手机上 测试收…

http://www.stormzhang.com/android/2015/03/05/android-debug-use-chrome/ 个人一直对Chrome情有独钟,Chrome除了更快之外,对开发者的支持更友好.内置强大的Developer Tools,相信Web开发简直爱不释手!而且Chrome Store里提供各种各样的插件,没有你用不到,只有你想不到.现在任何事基本Chrome全部办的到,有时候就在想,如果可以用Chrome调试Android App该多方便,而如今Faceboo…

使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等) 前言 移动端页面调试一直是好多朋友头疼的问题,iOS 由于其封闭的特性和整体较高的性能,整体适配相对好做,调试也由于 safari 的打通变得很方便.而 Android 系统,尤其是国内环境下的 Android 系统,由于版本跨度大,且各家厂商采用自研内核,使得其成为移动端页面问题出现的主要平台.工程师们采用了各种各样的方式来对其进行调试:alert 大法,页面引入或注入VConsole/eruda开启移动…

Cordova/Ionic开发的Android APP,需要启用WebView的调试模式,才可以在Chrome浏览器中输入chrome://Inspect,然后使用大家熟悉的开发者工具进行调试.不启用的话,就看不到App中的WebView页面,也没有Inspect链接. 确保Android版本4.4以上 打开scr下的主活动文件,如MainActivity.java,导入名称空间: import android.os.Build; import android.util.Log; import…

android网络调试一直是一个比较麻烦的部分,因为在不同序列的请求中,返回的数据会有不同的变化,如果能像web开发一样使用调试功能查看页面的访问数据该是多么美好的事情! 很幸运的是,现在Android开发也可以实时监听网络访问了,能够看到你的发送数据信息,也能够看到返回数据信息. 如图:   点击每个请求会看到详细页面,可以查看请求的详情,如图:   如果要达到上面的效果,你需要改造你的网络请求模块,使用Chrome浏览器和android程序之间的中间件来连接,这就是本篇要介绍的主题: OkH…

原文地址:http://han.guokai.blog.163.com/blog/static/136718271201321402514114/ 你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用这两种土办法确实解决了很多小型 JavaScript 脚本的调试问题.不过放着 Chrome 中功能越发强大的开发者工具不用实在太可惜了.本文主要介绍其…

Chrome 是 Google 出品的一款非常优秀的浏览器,其内置了开发者工具(Windows 系统中按下 F12 即可开启),可以让我们方便地对 JavaScript 代码进行调试. 为方便大家学习和使用,本文我对 Chrome 的调试技巧做个系统的总结. 一.设置断点 有两种方法可以给代码添加断点: 方法1:在 Source 内容区设置 (1)找到要调试的文件,然后在内容源代码左侧的代码标记行处点击,即可打上一个断点. (2)刷新浏览器,当页面代码运行到断点处便会暂停执行.     方法2:…

本文系博主原创,未经许可不得转载.如未经本人同意,私自转载或盗取资源提供下载,本人保留追究其法律责任的权利. 调试基于WebView的Hybrid App最舒服的工具当然是Chrome自带的开发者工具,其中有我们熟悉的Dom树调试,JS调试,Network监视等等功能. Google提供的调试Android上WebView的步骤: 开启手机上的USB调试功能 打开Chrome浏览器,地址栏输入:Chrome://inspect,回车 Chrome会自动检测手机上打开的App,并列出可调试的Web…

使用chrome浏览器,输入chrome://inspect可以调试android app里面的网页,如果inspect的时候,是空白, 问题截图: 那就在C:\Windows\System32\drivers\etc\hosts文件加入 61.91.161.217 chrome-devtools-frontend.appspot.com 61.91.161.217 chrometophone.appspot.com 当前调试------适用于Android APP 引用于https://www…

在手机浏览器的一篇文章翻译300ms延迟实用文章,原文地址  http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away 去掉移动设备浏览器上的300ms点击延迟 你能够在站点上找到非常多关于在为了高速流畅的站点用户体验.在某个地方降低10ms或90ms的文章.不幸的是.在基于触屏的跨平台移动浏览器上,触碰或点击一个物体时有一个人为的300ms延迟,即300ms后浏览器才觉得是一个点击事件.当人们觉得移动Web应用比原生应用慢时…

今天在手机UC上发现我的一个网页打不开,而在PC上是正常的,因此需要通过Chrome远程调试手机端UC浏览器查下问题,折腾了老久才弄好. 获取 Google USB 驱动程序 首先将手机通过USB接口与PC连接 接着要确认手机USB驱动程序是不是正常,可以在设备管理器中查看,如果设备左侧没有黄色感叹号,则说明正常. 如果不正常就需要手动安装了,给个链接:获取 Google USB 驱动程序 开发者选项 打开手机的开发者选项 进入手机中 我的设备 -> 全部参数,连续7次点击版本号,以Redmi…

最近换了下编辑器,改用vscode(Visual Studio Code),很喜欢它左边显示的文件路径,轻松新建文件夹和文件,也喜欢它的编码转换功能,gbk和utf-8可以随时切换,因为公司网站有些页面是utf-8有的是gbk2312,很多时候我都分开使用用2个编辑器,感觉从现在开始不用了,哈哈 很快就看到一个好用的拓展,可以在编辑器中设置断点,谷歌浏览器中调试代码,我很想要这个功能,但是我装了Debugger for Chrome后,按照百度出来的方法进行配置,屡屡报错,尝试了很久,终于在刚才…

无论是调试Web页面还是调试Hybrid混合应用,只要是调试Android的webview,都需要使用Chrome://inspect进行调试.但是国内开发者会出现404 Not Found错误: 解决方法有两种: 最直接的方法:FQ.Fan墙最大的问题免费的不稳定,按月收费又太浪费. 推荐使用离线开发者调试工具包(支持windows/mac/linux),再也不用到处找出口了…