Web開発を強化するための6つの便利なブックマークレット

ブックマークレットは、Webブラウザーに追加できるJavaScriptベースのブックマークです。この記事では、Web開発ワークフローを改善し、これらのヒントを時間を節約するブックマークウィジェットに変換する方法に役立つ強力なブラウザのヒントを紹介します。

1. 設計モードをアクティブにします
2. すべての要素に背景を適用します
3. イベントをシミュレートします
4. クッキーを設定します
5. スイッチクラス
6. カラーセレクターブックマーク
7. 他にどのようなブックマークガジェットを考えることができますか？

設計モードをアクティブにします

デザインパターン（JavaScriptプロパティであるため、DesignModeを備えたスタイル）は、リアルタイムWebサイトでさまざまなコピーの変更を試したい人に適しています。たとえば、ウェブサイトの設計プロセスでコンテンツを読むことの効果を観察するのが好きなコピーライター、またはテキストが特定のフォントサイズの特定のスペースに快適に収まることを確認したいデザイナー。

JavaScriptには、HTML全体を編集可能にする非常にシンプルな機能があります。 HTMLのcontentedable = "true" name値属性（またはcontentedable = "true" in javascript）とまったく同じように機能しますが、ドキュメント全体で動作します。それがどのように機能するかを理解したい場合は、まず関連するキーボードショートカットを使用して、ブラウザのコンソールを開きます。

• Chrome：オプション⌘J / Shift Ctrl j
• Firefox：オプション⌘K / Shift Ctrl k
• サファリ：オプションc / shift ctrl c

次に、 document.designMode="on"をコンソールに入力し、 returnを押してから、任意のテキスト要素をクリックします。これらのテキスト要素（および他のすべてのテキスト要素）をクリックするだけで編集できることがわかります。ライブWebサイトでテキストを編集するこの方法は、DevToolsを開くよりもはるかに高速で、はるかに少ない労力を少なくし、編集テキストオプションを右クリックして選択します。

「デザインパターン」が機能の最も正確な説明であるかどうかはわかりませんが、それでも非常に便利であり、驚くべきことに、長い間存在しています。

それで、それを有効にするためのより速い方法は何ですか？もちろん、それはブックマークガジェットです！ javascript: document.designMode="on";void 0;

すべての要素に背景を適用します

HTML要素に背景がない場合、境界を視覚化したり、他の要素からの距離を正確に測定することは困難です。開発者は、視覚的な不均衡を扱うときに境界をよりよく視覚化する必要がある場合があります（つまり、何かが「間違っている」が実際にはそうではない場合でも）、マージン折りたたみ（特定のマージンを無視）、さまざまな表示：/float：/position：問題など。

バックグラウンドを適用することは、すべてのHTML要素に半透明の背景を適用することを意味し、境界と間隔をよりよく視覚化します。私たちの多くは通常、DevToolsを開き、 selector { background: rgb(0 0 0 / 10%); }などのCSSステートメントをスタイルボックスに入力することでこれを行います。ただし、これはまだ非常に面倒で反復的です。ブックマークウィジェットを使用して簡素化できます。

繰り返しますが、ブックマークを作成するために、URLを作成します。これが私たちがこれに使用できるものです：

 javascript：document.queryselectorall（ "*"）。

透明度のオーバーレイは、各ネストされた要素が区別できることを保証し、それらの間の距離を測定できるため、半透明の背景を使用します。

イベントをシミュレートします

最初に一連の相互作用を必要とするか、特定の条件を満たすWebイベントをテストする必要がありましたか？これらのタイプの機能のテストまたはデバッグは時間がかかります。このイベントシミュレーションブックマークウィジェットを使用して、特定のイベントをすぐにトリガーでき、テストを簡単にします。

イベントのシミュレーションとは、「一時的な」ボタンを作成してJavaScriptイベントをトリガーすることを意味します。これにより、ログインなどの一般的なユーザーインターフェイス条件を満たすことなく、イベントを迅速かつ繰り返しテストしやすくなります。

JavaScriptイベントリスナーをセットアップしたと仮定すると、トリガー/モックをトリガー/モックする各イベントのブックマークを作成し、次のURLを送信します。

 JavaScript：document.querySelector（ "selector"）。クリック（）;

「セレクター」を唯一のセレクターに置き換え、「フォーカス」または「ぼかし」（必要に応じて）で「クリック」を置き換えるか、コードスニペットを拡張してスクロールなどのより複雑なイベントをトリガーします。

クッキーを設定します

クッキーは、ウェブサイト訪問者によってウェブサイト訪問者のコンピューターに保存されているトークンです。 Cookieには、有効期限を超えるまで、または削除されるまで作成されるWebサイトで読み取ることができるデータが含まれています。 Cookie自体の存在は、訪問者がログインしているかどうかを決定しますが、データ自体はユーザー情報を保存できます。

ブックマークウィジェットを使用してCookieを設定する可能性のあるシナリオの例は、Webサイトのテスト期間中にログインを強制する場合です。ウェブサイトは通常、ログインしてログインしていないときに非常に異なって見えますが、ログインしてログアウトすることで非常に面倒になる可能性があるため、このブックマークウィジェットは時間を節約できます。

期限切れ=クッキーの日付は手動で非常に面倒ですが、幸運なことに、これにより、独自の設定が作成されますCookieブックマークウィジェットアプリケットは、正確な名前を知っていれば、特定のCookieのブックマークウィジェットを生成できます。

スイッチクラス

クラスをHTML要素に追加または削除して、トグルクラスとも呼ばれる新しい状態または外観の変更をトリガーすることをお勧めします。クラススイッチは、ほとんどのライブWebサイトの舞台裏で発生しますが、テスト中に特定のユーザーインターフェイス条件を満たすためにも使用することもできます。

クラスのトグルは、外観の変更（代替テーマや状態など）やアニメーションをトリガーするために使用できますが、開発者ツールを使用することは、テスト目的のみである場合に少し注意が必要です（つまり、この方法で実際にユーザー向けにWebサイトが実行されていません）。他のブックマークウィジェットと同様に、このブックマークウィジェットはクラスをすばやく切り替えて時間を節約できます。

次のブックマークウィジェットを作成して、選択したセレクターに一致するすべての要素を見つけて、「クラス」を切り替えます。

 javascript：document.queryselectorall（ "selector"）。

カラーセレクターブックマーク

技術的には「ブックマークガジェット」ではありませんが、Scott Jehlによるこのブックマーク可能なデータURIが新しいタブを開きます。

だから、これが私の新しいカラーピッカーアプリです！ データURIに含まれるHTMLカラー入力にすぎないため、ブックマークできます。 （自分で追加できます）：

data:text/html;charset=utf-8, <title>Color Picker</title> <input type="color">

なぜこれがクールなのですか？さて、ページから色の値を取得するには何回必要ですか？DevToolsを開いて、要素の束をクリックし、CSSプロパティをダブルチェックしてその値を見つけることができますか？このガジェットを実行し、要素をクリックして、すぐに色を取得する方が良いです！

他にどのようなブックマークガジェットを考えることができますか？

Webブラウザを使用する面倒な開発者ツールを必要とする場合がある過度に重複するWeb開発ワークフローはありますか？もしそうなら、独自の時間節約ブックマークウィジェットを作成するのは非常に簡単です。 javascript:

ワークフローを簡素化するためにブックマークウィジェットを作成した場合は、見たいです！コメントでそれらを共有して、素敵なコレクションを作成しましょう。

以上がWeb開発を強化するための6つの便利なブックマークレットの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。