web-dev-qa-db-ja.com

Chrome Dev Tools？でライブサイトのローカル背景画像をテストします

Chrome devツールを使用してさまざまな画像をテストする方法はありますか？新しい背景グラフィックを作成し、<body>に既に背景グラフィックがあるライブサイトでテストしたいタグ：まだライブサイトを変更したくないのですが、新しいイメージがどのように見えるかを確認するためにテストするだけです。

cssimagegoogle-chrometestinggoogle-chrome-devtools
16
mcography

ここに答えがあります、Rob Donovanの好意@スーパーユーザー（経由で https://superuser.com/a/839500/454034 ）

「Chrome」に言及したので、Chrome拡張機能を使用してこれを行い、ファイルへのローカルアクセスを有効にすることができます。

次の手順を実行します：

1）画像があるローカルフォルダーで、「manifest.json」という名前のこのファイルを作成し、次のように入力します。

{
  "name": "File Exposer",
  "manifest_version": 2,
  "version": "1.0",
  "web_accessible_resources": ["*.jpg","*.JPG"]
}

2）これはあなたのchromeアドレスバー：chrome：// extensions /

3）[開発者モード]がオンになっていることを確認します（ページの右上）

4）[Unpacked Extensionの読み込み]ボタンをクリックします

5）イメージとmanifest.jsonファイルがあるローカルフォルダーに移動し、[OK]をクリックします

6）拡張子「File Exposer」がリストに表示され、「有効」にチェックマークが付いているはずです。フォルダーがネットワークドライブまたは他の低速ドライブ上にあるか、ファイルが大量にある場合、リストに表示されるまでに10〜20秒以上かかることがあります。

7）拡張機能に関連付けられている「ID」文字列に注意してください。これはEXTENSION_IDです

8）これで、HTMLで次の方法でファイルにアクセスできるようになり、「EXTENSION_ID」を拡張機能が生成したIDに変更します。

<img src='chrome-extension://EXTENSION_ID/example1.jpg'>

* .jpgは再帰的であり、指定したフォルダーおよびすべてのサブフォルダー内のファイルと自動的に一致することに注意してください。各サブフォルダーに指定する必要はありません。また、大文字と小文字が区別されることに注意してください。

「img」タグでは、元のフォルダーとそのフォルダーからの相対フォルダーを指定しないため、サブフォルダーのみを指定する必要があります。

Manifest.jsonファイルを変更する場合は、拡張機能の横にある[再読み込み（Ctrl + R）]リンクをクリックする必要があります。

33
nate_wilton

別のオプションは、単純なhttpサーバーを起動することです。

ターミナル（またはコマンドプロンプト）で、cdを画像が保存されているディレクトリに移動し、python -m SimpleHTTPServerと入力します。

これで、http://localhost:8000/filename.jpgを使用して、開発ツールで画像を参照できます。

16
Andreas Muller

これはあなたの質問に対する正確な答えではありませんが、できる方法の1つは dropbox public folder のようなものを使用することです。画像がフォルダーに配置されたら、右クリックして、開発ツールで使用するパブリックURLをコピーするだけです。

6
Johan Linder