Google Chrome™ デベロッパーツールで表示できないスマホ画面を確認するためには、「mobile browser emulator」を使用

デザイン ＞ モバイルデザイン

問題発生

　状態:- 　閲覧数:1,628 　投稿日:2015-12-27 　更新日:2015-12-27
Google Chrome™ デベロッパーツールでスマホ画面を表示できないURLに遭遇

解決策


Chrome ウェブストアより、Chrome拡張機能をインストール
・mobile browser emulator
With this extension for Google Chrome web developers can test mobile, and in particular responsive, web pages on their desktop

試してみたけれとも期待した効果を得られなかった拡張機能


特定URL(例えばユニクロ)に対して効力を発揮しない拡張機能一覧
・FireMobileSimulator for Google Chrome™
・smartphone simulator
・User-Agent Switcher for Chrome

モバイル対応サイトリニューアル仕様案

モバイルデザイン6 ／ フォーム



類似度ページランキング
順位 ページタイトル抜粋 ％
1 Google Chrome™ デベロッパーツールで表示できないスマホ画面を確認するためには、「mobile browser emulator」を使用 69
2 デフォルトの「Google Chrome」ではURL欄にwwwが表示されないため、「Microsoft Edge」を使用する 49
3 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない 41
4 ChromeでTwitter画像をクリックした際、拡大(原寸画像以上)表示しないようブラウザ側で指定するため、Chrome 拡張機能「Stylus」を使用しました。 38
5 ページで使用されている「id名」「class名」をChromeで取得したい 　 37
6 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 37
7 「Google Chrome」を再起動するためには「chrome://restart」へアクセスします。 37
8 「Google Chrome を起動後、100%の確率で3分以内に落ちる」場合は、アンインストール後インストールし直すしかない 36
9 「レイアウト崩れ」がどうしても解決しない → Chrome「デベロッパーツール」で怪しいと思った要素を、正常表示されるまで削除し続けていく 36
10 「:after擬似要素」は、Chromeの「要素を検証」で確認できない 35
11 CSS3-mediaqueries.jsは、@ importスタイルシートに記述した内容を反映しない 34
12 「Twitter Bootstrap」のアイコンは、画像なので色を変更できない 34
13 Chromeでリンク先ページを常に別タブで開くためには、「Ctrlキーを押しながらクリック」 33
14 「Webページへのリンク」をクリックした際、Chrome起動オプションを適用させるには、レジストリを書き換えるしかない 33
15 ボタンクリックした際、テキスト選択状態になるのを防止するためには、「user-select: none;」 33
16 「Google Chrome」ブックマークをフォルダー単位で、「ドメイン毎」「追加日昇降順」に並べ替える拡張機能「Sortmark」 33
17 Illustrator で文字を見た目通りSVG出力するためには、「アウトライン作成」処理が必要 33
18 ページ内リンクの位置を微調整するためには、Negative margin を使用する 33
19 「Google Chrome」タブをグループへ追加すると、そのタイミングでグループは自動的に開かれてしまいます。開かないようにすることはできません 33
20 「Illustrator CS3」 で「SVG トリミング出力」するためには、「トリムエリアツール」ではなく「アートボードの大きさ」を「オブジェクトサイズ」へ変更した後出力 33
2024/11/23 0:35 更新
週間人気ページランキング ／ 11-15 → 11-21
順位 ページタイトル抜粋 アクセス数
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 12
1 鉄道会社毎のカラーコード | カラーコード(色) 12
2 FontAwesomeでアイコンが□（四角）になって表示されない　Forbidden　 | Font Awesome(フォント) 10
3 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 6
3 Design 0 6
4 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 5
5 RGB ⇔ Lab | 色変換(色) 4
5 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 4
5 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 4
5 「東京都」のカラーコード取得は難しい | カラーコード(色) 4
5 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 4
5 16進数カラーコード ／ 2進数 4
6 カラーコード ／ 色コード | カラーコード(色) 3
6 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 3
6 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 3
6 個人的によく見返すエントリーへのLinkなど | その他 3
7 RGB ⇔ XYZ ／ CIE RGB ／ sRGB(D65) ／ sRGB(C) ／ Adobe RGB ／ NTSC RGB 2
7 RGBの種類 ／ ビットカラー | RGB(色) 2
7 8ビットカラー ／ インデックスカラー ／ パレットカラー 2
7 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2
2024/11/22 1:01 更新