フロントエンド開発は、以前は（一種の）簡単でした。いくつかの異なるコンピューター /オペレーティングシステム、物理的または仮想システムに多数のブラウザをインストールし、ほぼすべてのブラウザに組み込まれた開発者ツールを使用して、互換性の問題を解決するか、Web標準のさまざまな実装を回避できます。セルラーネットワークがより速くなったため、これはもはや当てはまりません。電話はより賢くなり、「タブレット」デバイスがどこにいても人々をインターネットに接続する別の方法を提供しました。これらの（ほとんどの）モバイルデバイスでのデバッグは、異なる種類のゲームであり、12を超えるモバイルブラウザーが存在するという事実は、仕事を容易にしていません。これは、リモートデバッグが役立つ場所です
キーテイクアウト<span>sudo npm -g install weinre</span>
ドキュメントは、WindowsでWeinreを使用する方法についてはそれほど明確ではないため、プロセスのWindows側に関するもう少し情報を提供します。最初に知っておくべきことは、IPアドレスです。LocalHostまたは127.0.0.1のページにアクセスしても訪れないためです。 LinuxまたはMac OS上のifconfigおよびWindowsでIPConfigを使用してIPを見つけることができます。静的IPアドレスは、Weinreを使用する開発者に最適です。そうしないと、コンピューターを起動するたびにIPを発見する必要があります。ローカルネットワークから特定のIPアドレスを取得する方法は、この記事の範囲を超えていますが、Windowsのガイド、Mac OSXのガイド、Ubuntuのガイドです。
モバイルデバイスにHTMLファイルをロードできないため、HTTPサーバーが必要になります（そのため、コンピューターのIPアドレスを知る必要があります！）。 Node.js、Apache、IIS、またはMiddlemanやJekyllなどの静的サイトジェネレーターを使用できます。ワークフローに最適なものは何でも。また、単純なヘルパーメソッドをMiddlemanに追加するRubygemもあります。私はApacheを使用し、次のものを提供します - 特に興味深い静的HTMLファイルを提供します。weinreを実行します
<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>
<span><span><span><head</span>></span>
</span> <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span> <span><span><span><title</span>></span>WEb INspector REmote<span><span></title</span>></span>
</span> <span><span><span><meta</span> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1"</span>></span>
</span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="css/foundation.min.css"</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span> <span><span>.flex-wrapper</span> {
</span></span></span><span><span> <span>display: -webkit-box;
</span></span></span><span><span> <span>display: -webkit-flex;
</span></span></span><span><span> <span>display: -ms-flexbox;
</span></span></span><span><span> <span>display: flex;
</span></span></span><span><span> <span>-webkit-flex-wrap: wrap;
</span></span></span><span><span> <span>-ms-flex-wrap: wrap;
</span></span></span><span><span> <span>flex-wrap: wrap;
</span></span></span><span><span> <span>}
</span></span></span><span><span>
</span></span><span><span> <span><span>.flex-box</span> {
</span></span></span><span><span> <span>-webkit-box-flex: 1;
</span></span></span><span><span> <span>-webkit-flex: 1 1 30em;
</span></span></span><span><span> <span>-ms-flex: 1 1 30em;
</span></span></span><span><span> <span>flex: 1 1 30em;
</span></span></span><span><span> <span>}
</span></span></span><span><span> </span><span><span></style</span>></span>
</span><span><span><span></head</span>></span>
</span>
<span><span><span><body</span>></span>
</span>
<span><span><span><div</span> class<span>="wrapper"</span>></span>
</span> <span><span><span><div</span> class<span>="row"</span>></span>
</span> <span><span><span><div</span> class<span>="large-10 large-offset-1 column"</span>></span>
</span> <span><span><span><h1</span>></span>Remote Debugging for Front-end Developers<span><span></h1</span>></span>
</span>
<span><span><span><div</span> class<span>="flex-wrapper"</span>></span>
</span> <span><span><span><div</span> class<span>="flex-box"</span>></span>
</span> <span><span><span><p</span>></span>Front-end development used to be (kind of) easy.
</span> One could easily install a bunch of browsers on a couple
of different computers / operating systems, physical
or virtual, and use the developer tools built in almost
every browser to solve compatibility problems, or work
around different implementations of web standards.
This is no longer the case, not since cellular networks
became faster, phones became smarter and light “tablet”
devices offered a new way to connect people to the internet
from wherever they are. Debugging in these (mostly)
mobile devices is a different kind of game, and the fact
that more than a dozen different mobile browsers
exist is not making the job any easier.<span><span><span></p</span>></span>
</span> <span><span><span></div</span>></span>
</span> <span><span><span><div</span> class<span>="flex-box"</span>></span>
</span> <span><span><span><blockquote</span> cite<span>="http://people.apache.org/~pmuellr/weinre/docs/latest/Home.html"</span>></span>
</span> <span><span><span><p</span>></span>weinre is WEb INspector REmote. Pronounced like
</span> the word “winery”. Or maybe like the word “weiner”. Who
knows, really.<span><span><span></p</span>></span>
</span> <span><span><span></blockquote</span>></span>
</span> <span><span><span><p</span>></span>WEb INspector REmote was built to enable remote inspection
</span> and debugging of web pages across different devices. It’s a
useful tool, especially when you need to debug a ”UIWebView”
or Safari on iOS while developing on Linux or Windows. weinre
*reuses the user interface code from the Web Inspector project
at WebKit* so most front-end developers should already be
familiar with the toolbox.<span><span><span></p</span>></span>
</span> <span><span><span></div</span>></span>
</span> <span><span><span></div</span>></span>
</span> <span><span><span></div</span>></span>
</span> <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span>
</span>
<span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>このフォルダーの準備ができたら、次の内容がある名前のserver.properties内に新しいテキストファイルを作成します。 それが占有されている場合は、httpportを自由に変更してください。これで、コマンドプロンプトにWeinreを入力することでWeinreを実行できるようになり、Weinreサーバーは選択したポートをリッスンします。デバッグするために必要なページに次の行を追加します（または上記のテストHTMLファイルを上記で提供しました）：
お気に入りのWebKitベースのブラウザを起動し、weinreサーバーのアドレスを入力します：http：// your_ip_address：8081/client/。これはあなたのデバッガーです！次に、スマートフォン/タブレット、別のブラウザ、コンピューター、または仮想OS/デバイスにスクリプトを追加したばかりのWebページを開きます。違いはありません。 Weinreデバッガーでこのクライアントを表示し、それらの開発ツールを使用してデバイス上のページを検査できるはずです！任意のDOM要素で（ほとんどの）適用されたCSSを表示し、インラインスタイルを追加、削除、または変更し、コンソール内のJavaScriptメッセージを表示できます。コンソールでJavaScriptコマンドを実行してDOMを操作することもできます。それは、レンダリングエラーや予期しない動作を特定するのに役立つはずです！
<span>boundHost: -all- </span><span>httpPort: 8081 </span><span>reuseAddr: true </span><span>readTimeout: 1 </span><span>deathTimeout: 5</span>
これがAndroid 4.1.2：
のデフォルトのブラウザを検査する例です。
JavaScriptコンソールを使用してテキストの色を変更できます：
他のjavaScriptコマンドとともに：
Weinreを使用したアプリケーション
のUIWebViewsとシミュレーターは検査できます。 🎜> スマートフォン /タブレットはコンピューターに物理的に接続する必要があり、Windowsを使用している場合は、おそらくデバイスにUSBドライバーをインストールする必要があります。 Windowsユーザーは、iOSを検査する必要がある場合は、iTunesをインストールする必要があります。最後に、Developer Mode
および/またはValence in Action Android 5スマートフォンでクロムブラウザのHTMLソースとスタイルを検査する： 任意のサイトを検査できます：
OK REACT…以下にコンソールメッセージを残してくれてありがとう！
ここにJavaScriptをデバッグする例があります：
desktopブラウザでのCSSレンダリングの不一致または異なるJavaScriptの動作をデバッグするのは比較的簡単であり、ほとんどの最新のブラウザーは定期的に更新され、Web標準の大規模なセットをサポートするため、最近はめったに必要ありません。ただし、モバイルブラウザの開発は簡単ではありません。文字通り数十個があり、データベースを使用できますが、さまざまなプラットフォームでのCSSとJavaScript APIサポートに関する貴重な情報を提供します。全て！ WeinreとValenceは、フロントエンド開発者を大いに支援し、モバイルデバイスをリモート /デバッグするツールを提供します。
フロントエンド開発者のリモートデバッグに関するよくある質問リモートデバッグを使用して特定および解決できる一般的な問題は何ですか？ Webアプリケーションの問題。これらには、JavaScriptエラー、CSSスタイリングの問題、HTMLマークアップエラー、パフォーマンスの問題が含まれます。コードを介して、リモートシステムでの実行を監視することにより、これらの問題の正確な位置と原因を特定し、それらを解決しやすくすることができます。
はい、リモートデバッグを使用して、さまざまなデバイスとブラウザでWebアプリケーションをテストできます。これは、ユーザーが使用している可能性のあるすべてのプラットフォームとブラウザでWebアプリケーションが正しく機能するようにするために特に便利です。デバッグツールをリモートデバイスまたはブラウザに接続することにより、ユーザーが使用するのと同じ環境でコードをテストおよびデバッグできます。 🎜> Chrome DevToolsは、リモートデバッグのための強力なツールです。それを使用するには、最初にデバッグするデバイスでリモートデバッグを有効にする必要があります。これは、デバイスの設定の「開発者オプション」に移動し、「USBデバッグ」を有効にすることで実行できます。これが完了したら、USBケーブルを使用してデバイスをコンピューターに接続します。その後、コンピューターでChrome Devtoolsを開き、[リモートデバイス]タブを選択できます。ここから、デバッグするデバイスを選択して、新しいデバッグセッションを開始します。
リモートデバッグは強力なツールですが、セキュリティ上の懸念があります。デバッグツールをリモートシステムに接続すると、基本的にそのシステム上のコードの実行をそのツール制御を提供しています。これは、デバッグツールとリモートシステムとの接続が安全でない場合、悪意のあるアクターによって潜在的に悪用される可能性があります。したがって、リモートデバッグを使用するときは常に安全な接続を使用し、信頼できるリモートシステムにのみ接続することが重要です。
以上がフロントエンド開発者向けのリモートデバッグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
