Chrome DevToolsを使いこなすための参考サイトまとめ | 1 pixel｜サイバーエージェント公式クリエイターズブログ
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 フロントエンドエンジニアの谷です。 本記事ではGoogle Chromeの開発者ツール、Chrome DevToolsを使いこなすために参考になるサイト、ページの紹介をします。 すでに多くのフロントエンドエンジニアが開発で使っているかもしれませんが、「要素のインスペクタなどの基本的な機能しか使っていない」「UA切り替えくらいしかつかってない」というような方や、そもそもほとんど使ったことがない、という方もこれらを参考にフロントエンド開発を効率化していきましょう！ 基本的な使い方 Chrome DevTools Overview 基本はやはり公式ドキュメ
Chromeで簡単にWebサイトのスマートフォン表示を確認する方法 | ryodesignblog
このブログはスマートフォン表示に対応しています。いろいろと面倒でしたが、開発を簡単にしてくれたのがGoogle Chromeでした。今日はChromeを使用して簡単にWebサイトのスマートフォン表示を確認する方法をご紹介します。 開発者ツールを起動 まずはChromeの開発者ツールを起動します。WindowsならF12、MacならCommand+Option+Iで起動できます。 開発者ツールのオプションを起動 オプションを起動します。右下の歯車ツールです。 ユーザーエージェントと画面解像度を変更 まず、「Override User Agent」にチェックを入れます。色々とUAを選択することができるので、iPhoneやiPad、Androidなどを選択します。 この状態でページをリロードすれば、サイトのスマートフォン表示を確認することが出来るはずですが、UAではなく画面解像度で表示を変更して
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
