今回やりたい事_説明
Chromeデベロッパー ツール(developer tools)で以下の利用方法を案内
- キャプチャ取得
- パスワード可視化
- ブラウザUA変更
今回の記事が参考になる方
- 非エンジニア
- 制作ディレクタ
- 新社会人
▼環境案内▼
PC：Windows OS 10（非エンジニアなので細かいことは書かない。）
Chromeブラウザ：最新版
NETWORK：普通に自宅のWi-fi か 会社有線LAN環境
１．Chromeブラウザを開きデベロッパー ツールを起動した後に表示しているページをキャプチャ取得する
デベロッパー ツールを起動するにはキーボードの「F12」を押下するか、マウスで右クリックして、「検証」を選択する
もしもデベロッパー ツールを起動した後にメニューが日本語でない時には言語設定を変更しましょう。
英語が得意であれば別ですが、日本語の方が断然進めやすいです。
画面を選択してキーボードの「Shift＋Ctrl＋p」を押下します。
表示された実行＞部分に「キャプチャ」と入力すれば、以下の選択肢が表示する。
フルサイズを選択すると表示していないページ下部までキャプチャできる
保存してキャプチャ取得完了！簡単でしょ？ぜひ活用下さい。
２．ChromeブラウザでUserAgentを指定してページ表示したい
こんな時ありますよね。
iPhone13で見たい！とか、Galaxy＊で見たい！とかなら結構手段あるんですが、例えばMac safariで見たい！とか、時にはアプリで生成したWebViewの特有のUserAgentがあってそれでみたい。
なんかもあると思ってます。その時はこちらの方法で出来ますよー。
- デベロッパー ツールを起動する
- 画面右上の「三点」を選択する
- 「その他のツール」を選択する
- 「ネットワーク状態」を選択する
ユーザエージェント欄の「プルダウン」で好きなUserAgentを選択する
ページを再度読み込めば、指定のUAでページ表示できます。
もしアプリで生成したWebViewの特有のUserAgentで見たい時にはプルダウンの選択をカスタムにしてもらい入力欄に値を入れればそのUserAgentで閲覧できますよー。
３．Chromeブラウザでパスワード可視化する方法
chromeブラウザとかで、自動保存してくれているパスワードが「・・・・」とか「＊＊＊＊」とかで非表示になっているケースありますよね？
パスワードを表示する。みたいなサポートがあればいいんですが、全部あるわけじゃない。
そんな時にこれ使えますよ。
-
デベロッパー ツールを起動する
-
矢印アイコンを選択
-
パスワード欄を選択
-
要素内の青く背景が表示しているところに注目
-
「type="password"」となっている"password"部分をダブルクリックし「text」に変更する
はい、表示されましたね。。魔法かよ！
今日はここまで。Chromeブラウザは第二弾やろうと思いますので次回もよかったら見て下さい。では。