web-dev-qa-db-ja.com

AndroidネイティブブラウザでCSSをデバッグするには？

Android用Cordovaでハイブリッドアプリを構築しています。 HTML5/CSS3は、デスクトップでChrome、AndroidでChromeを使用して適切にレンダリングされます。

ただし、Cordovaを介して、HTML5/CSS3はネイティブブラウザー（「インターネット」という名前のアプリケーション）でレンダリングされます。そして、CSSの解釈にはいくつかの問題があるようです。

FirefoxにはFirebugがあり、Chromeにはリモートデバッグ用のデスクトップで利用可能な開発者パネルがあります。モバイルネイティブブラウザでCSSを効率的にデバッグするために使用できる同様のツールを知っていますか？

androidcsscss3remote-debugginghybrid-mobile-app
25
Yako

ついに見つけましたWeinre。このソリューションはCordovaプロジェクトに属します。 http://people.Apache.org/~pmuellr/weinre/docs/latest/

19
Yako

私は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>

このウェブサイトの詳細 weinreによるリモートデバッグ

13
ken

より新しいオプションを提供するだけです。

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/

3
Thiago C. S Ventura

まず、Android Virtual Device console with $ Android avdそして、設定済みのAndroid v4.4.2エミュレーションのみネイティブブラウザインストール済みで起動します。

次に、Chrome v54.0 for desktop for your laptop、open Google-Developer-Tools /Top-Right-Contextual-Menu/ More-Tools/-Remote-Devices ...

そこに、connected状態の仮想デバイスが表示されるため、Ionic2アプリの任意のページのInspectボタンをクリックできます。

このアクションにより、新しいChromeの開発者ツールフローティングウィンドウが開きます。ここで、Webアプリケーションで行うのと同じ方法でCSS、HTML、およびJavascriptを検査できます。

これが誰かを助けることを願っています。

1
JavierFuentes