web-dev-qa-db-ja.com

Chrome Extension "Window Resizer"の代替

最近の論争(2013年12月) Chrome「Window Resizer」というタイトルの拡張機能を考慮して、Chromeレスポンシブ開発テスト用のブラウザー?

37
JoshuaDavid

解決テストは、可能な代替手段である可能性があります。

解像度テストでは、開発者がさまざまな画面解像度でWebサイトをプレビューできるように、ブラウザーウィンドウのサイズを変更します。一般的に使用される解像度のリストと、そのリストをカスタマイズする機能が含まれています。また、ユーザーにGoogleブラウザサイズを有効にするオプションを提供します。

Chromeウェブストアで利用可能:

https://chrome.google.com/webstore/detail/resolution-test/idhfcdbheobinplaamokffboaccidbal

26
flo

レスポンシブデザインをテストするもう1つのネイティブソリューションは、組み込みのChrome= Developer Tools.Tools-> Developer Toolsを選択し、表示されるウィンドウの右下隅にある歯車アイコンをクリックすることです。 [有効]をクリックしてから[デバイスメトリック]をクリックすると、レプリケートする解像度を指定できます。

また、その画面の「ユーザーエージェント」を変更することにより、Chromeは選択されたデバイスのデバイスメトリックを設定します。これは、レスポンシブブレークポイントをどこに置くかを決定するときに役立ちます。人気のデバイス。

これは2クリック拡張ほど簡単ではありませんが、拡張なしのソリューションであり、実際のデバイスの正確な画面測定を使用するという利点があります。

30
Dave

はい!

拡張機能を避けることをお勧めします。マスターchrome開発ツール キーボードショートカット

を使用して開きます
F12
または
ctrl+shift+i(Gnu/LinuxまたはWindows)
cmd+opt+i(マック)
または
メニュー>ツール>開発者ツール

編集:スクリーンショットはchrome devツールの最近の変更を反映するように更新されました。

screenshot - step 1 of 2screenshot - step 2 of 2

Gifはそれをより良いと言います!

gif screencast with all steps (ヒント:新しいタブで画像を開く)

20
JorgeArtware

Chrome 35.0.1916.153 m)の時点で@Daveの回答を更新するには、歯車アイコンの左側にある[引き出し]アイコン(> =)を選択し、[ソース]、[エミュレーション]タブの順に選択する必要があります.

最新のツールを入手するには、@ FireCodings link にアクセスしてGoogleのモバイルエミュレーション開発ツールにアクセスし、ダウンロード/インストール Chrome Canary にアクセスしてください。次に、Canaryで[ツール]-> [開発ツール]を選択し、ツールウィンドウ(ブラウザーの下部)の左上隅にあるモバイルアイコンをクリックし、[ソース]、[エミュレーション]の順にクリックします。情報は、ツールの使用方法を示すためにGoogleページのリンクにあります。

3
user2603432

別の(より安全な)代替手段は、所有者にすることです。

Googleには、拡張機能の作成に関する多くの ドキュメント があります。これを作成しました 本当にシンプルな拡張 これはプロジェクトに必要なすべてを行います。このコードは github にもあります。

2
graham

以下に、うまく機能するウィンドウリサイズブックマークレットを示します。

http://lab.maltewassermann.com/viewport-resizer/

2
Jeff

実際、開発者は引き下げて、問題のコード(「エコリンク」と呼ばれる)を拡張機能から削除しました。今日の時点で、アフィリエイトのものはなくなっていることになっています。

ソース: https://productforums.google.com/d/msg/chrome/mlAD1ygc0v0/gKLKWxoGrkIJ

バージョン1.9.0.3の変更ログ

バージョン1.9.0.3(2014-01-15):人気のある需要のため、EcoLinksを削除しました。

2
matt.nguyen

Windows with AutoHotKeyがインストールされている場合、resize-chrome.ahkに以下を保存し、ダブルクリックして実行します。

WinMove, ahk_exe chrome.exe,, 0, 0, 1024, 768
0
zupa