[フロントエンド必須]開発者デバッグパネル

クズども · 掲載地 2020/06/29 15:36:20

PC側のウェブサイトにアクセスするには、F12キーを押してブラウザからデバッグツールを開き、出力ログ、ネットワークリクエスト、ウェブページの要素、クッキーなどの情報を閲覧できます。

しかし、モバイルやミニプログラム、アプリを開発する際には異常な問題が発生し、その異常な情報を直接確認することはできません。この記事では、フロントエンド開発者用のデバッグパネルを2つ推奨しています。

まずソースコードをアップロードしてください:

ログインが見えます。

vコンソール

モバイルウェブページ向けの軽量でスケーラブルなフロントエンド開発者デバッグパネルです。

コンソールのログを確認してください
ネットワークリクエストの表示
ページ要素の構造を見てください
クッキー、localStorage、SessionStorage をチェックしてみてください
JSコマンドラインを手動で実行してください
カスタムプラグイン

住所：ハイパーリンクのログインが見えます。

エルダ

Erudaはモバイルウェブページのフロントエンド向けに設計されたデバッグパネルで、DevToolsのミニ版に似ています。コンソールログの取得、要素の状態の確認、XHRリクエストの取得、ローカルストレージやクッキー情報の表示などの主要機能を備えています。

ボタンのドラッグ&ドロップ、パネルの透明度設定。

コンソールパネル:コンソールログをキャプチャし、ログ、エラー、情報、警告、指令、時間/時間終了、クリア、カウント、アサート、テーブルを記録; %cカスタムスタイル出力を含むプレースホルダーのサポート; ログ型と正規表現によるフィルタリングのサポート; JavaScriptスクリプト実行もサポートしています。
要素パネル:タグのコンテンツとプロパティを表示; DOM上でアプリのスタイルを確認してください。ページ要素のハイライト対応; 画面上での直接クリック選択をサポートします。 DOMに拘束されているイベントの種類をご覧ください。
ネットワークパネル:リクエストをキャプチャし、送信されたデータ、返却ヘッダー、返却コンテンツなどの情報を閲覧できます。
リソースパネル:localStorage、sessionStorage、クッキーを表示・クリア。ページロードスクリプトやスタイルファイルを表示; ページ、読み込み画像を表示。
ソースパネル:ページのソースコードを閲覧; HTML、CSS、JSコード、JSONデータをフォーマットしてください。
インフォパネル:出力URLとユーザーエージェント; カスタム出力コンテンツのサポート。
スニペットパネル:ページ要素に境界を追加する; タイムスタンプを追加してページを更新します。カスタムコードスニペットもサポートしています。

住所：ハイパーリンクのログインが見えます。

クズども · 掲載地 2025/02/08 13:44:17

vconsoleはCDNメソッドを使って直接取り込みを行います

ログインが見えます。

[その他] [フロントエンド必須]開発者デバッグパネル

関連記事

閲覧したセクション