如何在 Android 原生浏览器中调试 CSS？

Posted 2023-02-25

【中文标题】如何在 Android 原生浏览器中调试 CSS？

【英文标题】：How to debug CSS in Android native browser?

【发布时间】：2013-05-16 16:57:07

【问题描述】：

我正在使用适用于 android 的 Cordova 构建一个混合应用程序。 html5/CSS3 可以在桌面版 Chrome 和 Android 版 Chrome 中正确呈现。

但是，通过 Cordova，HTML5/CSS3 是使用本地浏览器（名为“Internet”的应用程序）呈现的。而且 CSS 解释似乎有一些问题。

Firefox 有 Firebug，Chrome 有一个开发者面板，可以在桌面上进行远程调试。你知道我可以使用什么类似的工具来有效地调试移动原生浏览器的 CSS 吗？

【参考方案1】：

我终于找到了Weinre。 该解决方案属于 Cordova 项目。 http://people.apache.org/~pmuellr/weinre/docs/latest/

【讨论】：

Weinre 在 GitHub 上的最后一次发布是从 2014 年 10 月开始。我发布了如何使用 Chrome 的开发者工具窗口 here

【参考方案2】：

我已经在 Android 2.2 股票浏览器上尝试过 weinre，它运行良好

要设置它，

sudo npm install -g weinre

// make it available to external (than just localhost)
weinre --boundHost -all-

// include this line (change to your IP address) to every page to be tested
<script src="http://xxx.xxx.x.xxx:8080/target/target-script-min.js#anonymous"></script>

更多详情来自本网站Remote debugging with weinre

【讨论】：

加一个用于提供步骤。

【参考方案3】：

只是提供一个更新的选项。

您也可以使用 BrowserSync。目前它已经将 Weinre 集成到其中。

# Using a local.dev vhost
$ browser-sync start --proxy

# Using a local.dev vhost with PORT
$ browser-sync start --proxy local.dev:8001

# Using a localhost address
$ browser-sync start --proxy localhost:8001

# Using a localhost address in a sub-dir
$ browser-sync start --proxy localhost:8080/site1

http://www.browsersync.io/docs/command-line/

【参考方案4】：

首先，我使用 $ android avd 运行我的 Android 虚拟设备控制台，并仅在安装 native Browser 的情况下启动我配置的 Android v4.4.2 Emulation。

接下来，我在笔记本电脑上运行 Chrome v54.0 for Desktop，打开 Google-Developer-Tools/Top-Right-Contextual-Menu/More-Tools/Remote-Devices ...

在那里，我看到我的虚拟设备处于已连接状态，因此我可以点击 Ionic2 应用程序任何页面的 Inspect 按钮。

此操作会打开一个新的 Chrome 开发者工具浮动窗口，我可以在其中检查 CSS、HTML 和 javascript，就像在我的 Web 应用程序中一样。

希望这可以帮助某人。

【参考方案5】：

开始远程调试 Android 设备

https://developers.google.com/web/tools/chrome-devtools/remote-debugging

【参考方案6】：

这似乎在其他地方被问到，但可能不是一个具体的问题。无论如何，我发现这个答案 (Is there a kind of Firebug or JavaScript console debug for Android?) 很有帮助，但不是使用 Cordova，而是结合我的评论，使用 Xamarin Android Player。

【参考方案7】：

使用控制台 JavaScript API click here for more information

【讨论】：

这个资源处理 JS 控制台。我最感兴趣的是 CSS 状态：哪些样式应用于特定的 DOM 元素...

也可以使用Chrome for Android远程调试check out this video

恐怕这适用于 Chrome，而不是本机浏览器。原始问题中也引用了此解决方案。