ブラウザ開発者ツールで永続的にサードパーティのウェブサイトを変える方法

多くの場合、迷惑なWebサイトで物事を見つける.そして、- Web開発者として-あなたも、ソースへのアクセスを取得せずにWebサイトでいくつかの問題を修正するように求めている.
ブラウザで開発ツールを使用すると、物事の多くを変更することができますし、いくつかの問題を修正することもできます.あなたは、CSSを知ることなく色、寸法とより多くを微調整するために、視覚のツールを得ます.
問題は、変更が永続的ではない-ページをリロードしたら、彼らはなくなっている.さらに、あなたの変更を他のユーザーにアクセスできるようにするのは難しいですlive share .
スチュアートランリッジcomplained about that on his blog そして、何日もの間、戻って行きましたGreasemonkey and Userscripts . 両方ともまだ維持されています.同様のことをするFirefoxよりも他のブラウザにもいくつかの拡張機能があります.しかし、若干の調整をするために拡張をインストールしなければならないオーバーヘッドは、多くのようです.
しかし、このタスクを支援することができますブラウザの開発ツールのいくつかの機能があります.一部は見つけるのが難しいかもしれないか、決して見られないので、ここでは概要です.

要素、スタイルと変化

使用Elements and Styles 開発者ツールのペインでは、HTMLを検査したり、選択した要素のスタイルを変更または追加できます.ほとんどの場合、それはあなたがそれをしたいと思った正確に何かを行うまで、すでにあなたは、あなたのCSSを調整しているでしょう.

よく忘れているのは、大きな変更があったら、CSSファイルの名前をクリックしてSources あなたが開発ツールで本格的なエディタを持っているペイン.CSSファイルの右行にジャンプします.ミニ化されたファイルについては、開発者ツールは、より人間の読み取り可能なバージョンを得るために提供されます.それが何らかの理由で起こらないならば、あなたはクリックすることができます{} 代わりにボタン.

あなたが気づいていないかもしれないもう一つのことはChanges 機能.ソースコードに戻るときにCSSで変更したものを追跡する必要はありません.タブでは、あなたがしたすべての変更の違いビューを取得し、コピーして貼り付けることができます.

コンソール

The Console JavaScriptのデバッグ環境Breakpoints とても良いですね.また、write JavaScript in the console これは現在開いているドキュメントのウィンドウオブジェクトで実行されます.いくつかの便利なショートカットがあります.例えば$ is document.querySelector , $$ is document.querySelectorAll and $0 開発ツールの現在選択されている要素です.The copy() クリップボードにコピーします.あなたは見つけることができますa list of all the available commands ドキュメントで.
多くの場合、1行に1つの行に実行するすべてのコードを詰め込もうとしていることがわかります.完全なJavaScript式ではない行にEnterキーを押すと、コンソールは自動的に次の行を書き込んでいきます.また、いつでもシフトを強制して、コードを実行するためにEnterキーを押してください.上下の矢印を押すと、他の端末エミュレータと同じように、コンソールの履歴に戻ると転送することができます.
あなたはコンソールで巧みなことができます.たとえば、「メディア」を持つドキュメント内のすべてのリンクを取得し、重複をフィルタアウトしたい場合は、次の手順を実行します.

copy(
   [...new Set($$('a')
      .map(l => l.href)
      .filter(l => l.includes('media')))]
  .join("\n")
)

これを実行this page for example あなたの25ユニークな画像のリストを与える.
これは強力ですが、また、あなたがブラウザを再起動するときに、あなたの仕事を失うことになります+シフト+入力トリックが役に立つだけでなく、自然ではない感じている.
したがって、開発者ツールには、現在のページのコンテキストで実行するコードのスニペットを編集して格納する方法があります.

スニペット

Snippets の特徴ですSources 開発ツールのペイン.これは、現在のページのコンテキストでは、組み込みエディタを使用して実行するために小さなスクリプトを書くことができます.スクリプトの名前を指定し、後で再利用するためのコレクションとして保管できます.

これはコンソール体験をアップグレードしますが、ページを再読み込みするたびに、スクリプトを手動で実行する必要があります.そして、あなたは修正しようとするページのリソースを再利用することはできません.これを行うには、オーバーライドと呼ばれる機能を使用できます.

オーバーライド

オーバーライドを使用すると、現在のWebサイトの任意のリソースを取ることができますし、お使いのコンピュータ上でローカルに格納します.ドキュメントの後の再読み込みでは、ブラウザはライブの代わりにあなたのローカルコピーを取るでしょう.
私は書いたdetailed explanation how to use them 公式開発ツールのドキュメントでは、機能を説明します.
オーバーライドに関する優れた部分は、ページの実際のコードを使用して変更することです.タブから直接ネットワークタブからファイルを選択できます.一旦あなたがそれらを削除するまで、あなたがあなたのオーバーライド・フォルダをそこに置くならば、置き換えとしてそこにそこにとどまります.ブラウザが正しいフォルダ構造を作成します.これは、コードを微調整することができますし、一度あなたがオーバーライドフォルダーをzip化することができますし、ドロップダウンとしてサイトのメンテナに送ることができます.また、迷惑なポップアップスクリプトをオーバーライドする興味深い機能です.
オーバーライド

Shawn Maust / A Faster Web

Trys Mudford

ハリーロバーツによるスクリーンキャスト

概要

これらはローカルのWebサイトを変更できるようにする開発ツールの機能の一部です.それはライブサイトと遊ぶのが楽しいし、お客様のニーズに変更されます.そして、いくつかのスクリプトをローカルで走らせることは、最も熱心なブラウザ拡張を使用するより、あなたのブラウザーのパフォーマンスに最も安全で、より有害でありません.