Brackets × Adobe Edge Inspect CCでスマホの実機チェックを効率化 - Qiita
こちらの記事ではBracketsとAdobe Edge Inspect CCを連携させ、スマホの開発・デバッグをリアルタイムに行う方法をご紹介します。（といっても使い方は簡単ですが） 基本的な使い方はこちら→Bracketsの機能紹介、使い方解説 その他の便利エクステンション集はこちら→ Brackets おすすめエクステンション集・解説 Adobe Edge Inspect CCとは Adobe Creative Cloud（以下CC）にて提供されている、PCとスマートデバイスを連携させるツールです。 例として スマホサイトをリアルタイムに実機確認しながら開発する PCで表示させているサイトのナビゲーション同期・デバッグ・スクリーンショットの撮影 等のことが行うことが出来るようになります。 （右側がEdge Inspectを接続しているAndroid） 使用方法としては Brackets
モバイルファースト時代のWebアプリケーションデバッグ手法 - クックパッド開発者ブログ
買物情報事業部の前田 (@TakatoshiMaeda) です。 Webアプリケーションを開発していると、思ったようなスタイルが適用されなかったりJavaScriptの挙動が意図しないものとなっているケースがままあります。そのような時に、Chrome Developer ToolsやSafari Web Inspector等を用いてスマートフォン実機に接続をしてデバッグしますが、 Android標準ブラウザ Android/iOSアプリケーション内部のWebView*1 ではインスペクタとの連携に対応しておらず、上記ブラウザでのみ再現がされる不具合に対してはHTML/CSSの確認やJavaScriptを実行しながらのデバッグは基本的に出来ません。 weinreというデバッグツールを用いて、上記ブラウザ環境下でWebアプリケーションのデバッグを行う方法について紹介します。 weinre we
WebView 中の HTML のデバッグ方法まとめ
iPhone, Android で WebView を用い、HTML5 + CSS3 + Javascript でアプリを開発するケースは、PhoneGap (Cordova) が登場して以来増えつつあるのではないでしょうか。 HTML 開発には Firebug や Web Inspector といったデバッグツールはもはや必須ですよね。 そこで今回は WebView 中の HTML のデバッグ方法をまとめてみました。 1. Android 全般・iOS4 (実機・シミュレータ)・iOS5 (実機) weinre （ワイナリー）というツールが利用できます。 weinre はウェブサーバとして動作し、そのサーバが提供するスクリプト・ページにアクセスすることで、ブラウザ上でデバッグが行えます。 （なお、この方法は後述する iOS5, 6 においても利用可能です） ・インストール・サーバの起動
第3回 weinreを使ったiOS／Androidアプリの動作検証 | gihyo.jp
前回はiOSプロジェクトを作成・動作確認を行うまでの手順と、ターミナルからiOSシミュレータを起動できるようにするまでの手順を紹介しました。今回は、weinreを使ったアプリケーションのデバッグについて紹介していきたいと思います。 weinreとは weinre（WEb INspector REmote）とは、名前のとおり、リモートでWebインスペクタをサポートするツールです。iOSデバイスやAndroidデバイス上でWebアプリケーションやPhoneGapアプリケーションを動作させている際に、リモートからWebインスペクタを使用できます。 対象となるWebアプリケーションの修正は、weinreのJavaScriptをロードする1文を追加するだけです。 Webインスペクタはリードオンリーではなく、書き込みが可能です。リモートのWebインスペクタ上でDOMやCSSを操作すると、デバイス上の表
weinre - Home
Home - Test Drive - Installing - Running - Multi-User - Security - Building - ChangeLog - License ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ weinre is Web Inspector Remote. Pronounced like the word "winery". Or maybe like the word "weiner". Who knows, really. Interesting places: GitHub: https://github.com/phonegap/weinre Google Group: http://groups.google.com/group/weinre weinre documentation: http://p
alt-scape.com
alt-scape.com 2019 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
スマートフォン最適化に便利な【weinre】を使ってみた
お久しぶりのwryyyです。 今流行？のスマートフォン最適化サイトを作る際、 スマートフォン実機でサイトを確認したら、デザインが崩れてる！！！となった場合、 皆様はどうしているでしょうか？ ・実機だと、FireFoxのFirebugなんて便利なもの使えないし… ・気合を入れて修正しては確認して…ってのもめんどくせー！！！ ってなった時にはもう大変です。 さて、そんな時にオススメするのが今回ご紹介する です！ さて、ではまず【weinre】とは何かから入って行きましょう。 weinreとは、簡単に行ってしまえばスマートフォンで閲覧しているページの ・HTML DOM ・CSS ・Javascript 等をPCから確認できるようにしちゃおうっていうツールです。 では、実際にインストールと使用方法について説明していきます。 ※ 私のPC環境がMACのため、MACの手順で記載させて頂きます
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
