WeChat Web開発者ツール


WeChat Web 開発者ツール

1474938413733070.png

##概要

は次のとおりです開発者が WeChat ベースの Web ページをより便利かつ安全に開発およびデバッグできるよう、Web 開発者ツールを開始しました。これは、開発者がこのツールを使用して PC または Mac 上で簡単に開発およびデバッグできるように、WeChat クライアントのパフォーマンスをシミュレートするデスクトップ アプリケーションです。

今すぐエクスペリエンスをダウンロード

次のことができます:

1. 自分の WeChat ID を使用して WeChat Web ページの認証をデバッグします

2. デバッグして確認します。ページの JS - SDK 関連の関数と権限、ほとんどの SDK の入出力をシミュレートします

3. weinre に基づくモバイル デバッグ機能を使用して、

X5 Blink カーネルのリモート デバッグをサポートします。

4. 開発を支援するために統合された Chrome DevTools を使用します。

ツール インターフェイスは、以下の図に示すように、主にいくつかの部分で構成されます。

1475997314788771.jpg#トップのメニュー バーは、アドレス バーの更新、戻る、選択などのアクションと、WeChat クライアント バージョンのシミュレーション設定ページへの統合された入り口です。左側は WeChat の Webview シミュレーターで、Web ページを直接操作して実際のユーザーの行動をシミュレートできます。右上には、デバッグするページへのリンクを入力するために使用されるアドレス バーと、キャッシュのクリア ボタンがあります。右下には、関連するリクエストと返された結果、デバッグ インターフェイスとログイン ボタンがあります。

WeChat Web ページ認証のデバッグ

以前、WeChat に基づいて Web ページ認証機能を開発する場合、開発者は通常、携帯電話で URL を入力して取得する必要がありました。しかし、携帯電話には多くの制限があるため、開発やデバッグ作業を行うには、このプロセスは非常に不便です。 WeChat Web 開発者ツールを使用することで、開発者はこの種のデバッグを PC または Mac 上で直接実行できるようになりました。具体的な手順は次のとおりです:

1. 開発者は、デバッガーで [ログイン] をクリックし、携帯電話の WeChat を使用して QR コードをスキャンしてログインし、実際のユーザー ID (テスト アカウントがサポートされています) を使用して開発を行うことができます。 WeChat Web ページの認証をデバッグします。携帯電話のログインページをご確認ください。バインドされた公式アカウントは、下図に示すように「WeChat Web Developer Tools」です。 #2 .開発者の身元情報のセキュリティを確保するために、デバッグしたい公開アカウントの WeChat アカウントとの拘束関係を確立することを開発者に要求します。具体的な操作は、公式アカウントで管理バックエンドにログインし、開発者センターを有効にして、開発者ツール - Web 開発者ツール ページで開発者の WeChat アカウントにバインディング招待を送信することです。バインディング ページは次のとおりです:

1475997326240078.jpg


3. 開発者は、携帯電話の WeChat で招待を承諾することでバインドを完了できます。各公式アカウントは、同時に最大 10 個の開発者 WeChat ID にバインドできます。招待確認ページは次のとおりです:

1475997353106458.jpg


4. ログインとバインドが完了すると、開発者は WeChat Web 認証のデバッグを開始できます。 ,

デバッグできるのはバインドした公式アカウントのみであることに注意してください

: 1475997378277666.jpg

非サイレント認証 URL の例
: https://open.weixin.qq. com /connect/oauth2/authorize?appid=wx841a97238d9e17b2&redirect_uri=http://cps.dianping.com/weiXinRedirect&response_type=code&scope=snsapi_userinfo

&state=type=quan,url=http://mm.dianping.com/weixin/account/home

WeChat Web 開発者ツールで同様の認証ページ URL を開きます (サンプルを直接使用することはできません)使用するには、バインディングが完了したパブリック アカウント認証ページの URL に変更してください)。WebView シミュレーターには、図に示すような効果が表示されます。

1475997423526810.jpg

[ログインの確認] をクリックして、ユーザー情報 サードパーティのページにジャンプします。これは、その後の開発やデバッグに非常に便利です。

サイレント認証 URL サンプル : https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx841a97238d9e17b2&redirect_uri=http://cps.dianping.com /weiXinRedirect&response_type =code&scope=snsapi_base

&state=type=quan,url=http://mm.dianping.com/weixin/account/home

WeChat Web 開発者ツールで次のようなものを開きます。ページURL（サンプルを直接使用することはできません。バインドされた公式アカウント認証ページのURLに置き換えてください）は、サードパーティのページに自動的にジャンプします。

注: プロキシを使用する場合、https ページをデバッグするには、プロキシ自体が https 直接接続をサポートする必要があります。

JSSDK 権限検証のシミュレーション

Web 開発者ツールを使用すると、WeChat クライアントで JSSDK リクエストをシミュレートし、認証結果と結果を視覚的に確認できます。ログ。 WeChat JSSDK DEMO ページを例に挙げます:

http://demo.open.weixin.qq.com/jssdk

デバッガーで URL を開きます。現在のページで wx.config の検証ステータスを確認でき、右側の [JS-SDK] タブで JSSDK の呼び出しログを簡単に確認できます。以下は検証に合格したページです:

1475997441391800.jpg


次は検証に失敗したページです:

1475997454813427.jpg

[権限リスト] タブでは、現在のページに権限がある JS-SDK リストをクエリできます:

1475997562879429.jpg

左側の WeChat Webview シミュレーターと組み合わせると、カード JSSDK のデバッグに WeChat Web 開発者ツールを使用するなど、JSSDK の効果を直感的にデバッグできます。 デモ:

http://203.195.235.76: 8080/jssdk/wxcardDemo .php

1475997495696514.jpg

1475997533316248.jpg


##注: バージョン 0.7 の WeChat Web 開発.0以降 開発者ツールはKaCoupon JSSDKのデバッグをサポートしていますが、デバッグしたいKaCoupon公式アカウントについては、開発者がWeChatアカウントとのバインド関係を確立する必要があります。バインドプロセスは認可されたものと同じです。ログイン。


#モバイル デバッグモバイル Web ページのパフォーマンスは通常、デスクトップ ブラウザのパフォーマンスとは異なります。これには、スタイルのプレゼンテーション、スクリプトのロジックなどが含まれており、開発者に特定の問題を引き起こす可能性があります。現在、WeChat Android クライアント Web ビューは X5 Blink カーネルへの完全アップグレードが開始されており、新しいカーネルはレンダリング機能、API サポート、開発支援の点で大きな進歩を遂げています。 WeChat Web 開発者ツールのリモート デバッグ機能を使用すると、携帯電話画面を WeChat Web 開発者ツールにリアルタイムにマッピングできるため、開発者は X5 Blink コア Web ページをより効率的にデバッグできます。具体的な手順は次のとおりです:

(1) 準備作業


1. バージョン 0.5.0 以降の WeChat Web 開発者ツールをインストールします

2. モバイル デバイスがリモート デバッグ機能をサポートしているかどうかを確認します

WeChat Web 開発者ツールを開き、[モバイル デバッグ] タブをクリックして、モバイル デバイスがリモート デバッグ機能をサポートしているかどうかを確認します。次に、モバイル デバイスを使用してポップアップ QR コードをスキャンし、デバイスに関するサポート情報を取得します。

3. モバイル デバイスの USB デバッグ機能をオンにする

1. モバイル デバイスの電源を入れ、「設定」→「開発者向けオプション」

# と入力します。 ## 2 .「USB デバッグ機能」にチェックを入れます

1475997579476835.jpg## Android 4.2 以降のデバイスでは、開発者向けオプションはデフォルトで非表示になっており、次の手順で有効にできます。手順:

1. モバイルデバイスの電源を入れ、[設定] -> [端末情報] に移動します。


2. [ビルド番号] を見つけて 7 回クリックします

4 . モバイル デバイスの USB ドライバーをインストールする

通常、開発者はモバイル デバイスのメーカーの公式 Web サイトから関連ドライバーをダウンロードするか、

Tencent Mobile Manager

を使用してデバイス ドライバーをインストールできます。 5. X5 Blink カーネルのインスペクター機能を開きます

WeChat Web 開発者ツールを開き、[モバイル デバッグ] タブを選択し、デバイスを使用して「」内の QR コードをスキャンします。デバッグ手順」。

以下のように、「TBS kernel Inspector デバッグ機能をオンにするかどうか」にチェックを入れ、WeChat を再起動します。

1475997607146160.jpg

(2) デバッグの開始

USB データ ケーブルを使用してモバイル デバイスを PC または Mac に接続した後、WeChat Web 開発者ツールの [モバイル デバッグ] タブをクリックして開き、X5 Blink デバッグ機能を選択すると、新しいウィンドウが開き、次のことができます。 WeChat の任意の Web ページにアクセスします。 デバッグを開始します。 X5 Blink コアの詳細については、公式 Web サイトの紹介をご覧ください。

すべての準備が完了すると、ウィンドウに現在のデバイスの基本情報が表示されます。

1475998013742652.jpg

任意のページで「検査」をクリックし、開く新しいウィンドウが表示され、開発者には使い慣れたデバッグ インターフェイスが表示されます。

1475998067452992.png

上の図の右上隅にある「携帯電話」アイコンをクリックして、画面マッピング機能を有効にします。

1475998083353067.jpg

WeChat Web 開発者ツールに統合されたモバイル デバッグ機能は、weinre をベースにしており、いくつかの改良が加えられています。weinre を直接使用する場合と比較して、次の 2 つの利点があります:

1. 手動作業は必要ありません weinre デバッグ スクリプトをページに追加します

##2. ajax リクエストに限定されず、weinre ネットワーク リクエスト ページ カードで完全な http リクエスト ログを確認できます

以下に示すように:

1475998123150221.jpg

#モバイル デバッグ機能はまだ https をサポートしていないことに注意してください。

Chrome DevTools

WeChat ウェブ開発者ツールは Chrome DevTools を統合します。 PC での以前のデバッグ エクスペリエンスと一貫性があり、すぐに開始できます。

以下に示すように:

1475998136381153.jpg


##ダウンロードアドレス

最新バージョン：（2016.05.19） ) 0.7.0

更新内容:

1. カードとクーポン JSSDK のデバッグ サポートを追加

2. 個別のケースでのネットワーク エラーを修正

3場合によっては JSSDK 認証が失敗する問題を修正

4. その他のエクスペリエンス最適化とバグ修正


Windows 64 ビット バージョン:

ダウンロード アドレス

 MD5: 2e054987a0dabc967a39f2f0a4949e2b

Windows 32 ビット バージョン:

ダウンロード アドレス

 MD5: 956946b0c0b19532ee622d38968effbf

Mac バージョン:

ダウンロード アドレス

 MD5: f078bc88cf433d0b73f4b2aded9bec65

注: Windows XP をサポートします。 win7 以降、OS X 10.8 以降をサポート

技術サポートとフィードバック

電子メール アドレス: weixin-open@qq .com

電子メールの件名: [WeChat Web 開発者ツールのフィードバック]

電子メールの内容の説明:

1. 問題を簡潔な言葉で説明し、問題が発生したシナリオを明確に説明してください。スクリーンショットを添付していただければ、WeChat チームができるだけ早くフィードバックに対応いたします。

2. WeChat Web 開発者ツールのログ ファイルを添付してください。デバッグ ツールを閉じた後、次のパスで関連ファイルを見つけて、電子メールの添付ファイルとして送信してください:

Windows システムでは、

C:\Users\<ユーザー名>\AppData\Local\WeChat Web Developer Tools\User Data\WeChat Web Developer Tools.log

Mac システム下

/Users/<Username>/Library/Application Support/WeChat Web 開発者ツール/WeChat Web 開発者ツール.log