2018.10.27スポンサーリンクこんにちは、エンジニアにょけん(@nyoken_box)です。Chromeのデベロッパーツール、機能がありすぎるからまとめてほしい...困ったさんそもそも何ができるの...?こんな疑問に答えます。Chromeのデベロッパーツールは、「デバッグ」に使います。「デバッグ」とは、開発しているプログラムがうまく動かない場合に、バグ(プログラムの欠陥)の原因を特定して取り除くこと。エンジニアにとって一番苦行なのが、実はこのデバッグなんですよ。「うまくいくと思って動かしたら謎のエラーが出て意気消沈...」なんて経験が、あなたにもありませんか?デベロッパーツールによる効率的なデバッグ方法を知ることで、こうした苦痛な時間を軽減できます。マスターしていきましょう。画面デザインの作業効率化も可能デベロッパーツールはCSSを手軽に操作できる上、スマホからの見え方も確認できるため、画面デザインの作業効率化ツールとしても活用できます。起動は以下のコマンドでできます。※右クリックメニューの「検証」からも起動できます。例として、Yahooニュースのトップページでデベロッパーツールを開いてみました。下の方に、謎の画面がドーンと出てきましたかね?以下123の番号に沿って、ボタンの概要を説明します。1解析ボタン...マウスでカーソルを合わせた項目を解析します例:ボタンを押した上で、画面中央の野球選手の画像にカーソルを合わせると...↑こんな感じで、HTML内でどんな要素として存在しているかを表してくれます。2レスポンシブボタン...スマホ・タブレットでの表示を確認できますこんな感じですね。3各種パネル...プログラムの詳細をチェックできます※本記事では、超重要な「Elements」パネルの使い方をご紹介しますねデベロッパーツール「Elements」パネルの使い方デベロッパーツールで最も使うのが、「Elements」パネル。これさえ押さえときゃ基本OK「Elements」パネルでは、HTMLタグの要素や、CSSのスタイルをチェックできます。画面内のHTMLとCSSの関係をカンタンにチェックできるため、WEBエンジニアにとっては神のような機能なんですね。JAPAN」というリンクを検証してみましょう。JAPAN!」に対応するHTMLとCSSが表示されるのでチェックする超カンタンでしょ?しかし、これだけではない。なんと、このままHTMLタグやCSSの内容を変更して確認できるんです。JAPAN」(ナイツリスペクト)に変更して、色も緑にしてみましょう。検証手順4:HTMLとCSSを変更リンクに対するCSSを変更したので、他のリンクもちゃんと緑色になっていますね。このように、見た目を確認しながら修正作業などができるので、非常に便利です。いうのも、WEBプログラムって修正が非常にメンドくさいんですよね。再度プログラムをサーバにアップロードブラウザで対象ページを読み込む確認する普通はこれらの手順が必要なんですが、これを「Elements」パネル内で完結できるんですよ。簡易的な確認なので、開発中のオリジナルファイルには変更が反映されません。Chromeデベロッパーツールでデバッグしよう!デベロッパーツールでは、画面の見え方を確認しながらデバッグができることがわかっていただけましたでしょうか?ぜひ、利用して効率的に開発してみましょう。こんにちは、エンジニアにょけん(@nyoken_box)です。セキュリティおじさんにょけん(@nyoken_box)です。僕、なんとセキュリティエンジニアとして働いているんですよ。ブログで顔バレするくらいの危機意識のくせに。こんにちは、エンジニアにょけんです。こんにちは、Railsエンジニアにょけんです。人気プログラミングスクール「WebCampPro」の無料カウンセリングを受けてきたため、所感を述べていきます。こんにちは、エンジニアにょけん(@nyoken_box)です。こんにちは、エンジニアにょけん(@nyoken_box)です。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。ホームプログラミングにょ犬のプロフィールにょけん1998年に生まれた。→酒造メーカーの情報技術部門で1年半働いた後に退職しました。音楽をこよなく愛しています。スピッツの公式ファンクラブに加入しています。けんのボックス.メニュースピッツ音楽エンタメエンジニア転職プログラミングお問い合わせホーム検索トップサイドバーにょ犬のプロフィールにょけん1998年に生まれた。→酒造メーカーの情報技術部門で1年半働いた後に退職しました。音楽をこよなく愛しています。スピッツの公式ファンクラブに加入しています。音楽アーカイブ2024年7月22024年6月12024年5月12024年3月12024年2月12024年1月12023年12月22023年11月22023年10月42023年9月22023年6月22023年5月12023年4月22019年7月12019年5月22019年4月82019年3月112019年1月192018年12月102018年10月232018年9月122018年8月232018年7月62018年6月112018年5月142018年4月132018年3月192018年2月92018年1月112017年12月2モバイルバージョンに移動タイトルとURLをコピーしました。