Home-theater-designers
Chrome DevToolsは、開発者にとって不可欠な資産です。他のブラウザは非常に便利なトラブルシューティングツールを提供しますが、Chrome DevToolsは、その多機能インターフェイスと人気のために注目に値します。
Chromeは、強力なデバッグツールスイートがあるため、開発者に最も人気のあるブラウザです。 Chrome DevToolsの使用は簡単ですが、それを最大限に活用するには、ChromeDevToolsがどのように機能するかを理解する必要があります。
Chromeデベロッパーツールの仕組み
Chrome DevToolsを使用すると、エラーコンソールやその他のデバッグおよび監視ツールを介してウェブサイトの問題を解決できます。 DevToolsを使用すると、フロントエンドの抜け穴が明らかになり、モバイルデバイスやタブレットデバイスでWebサイトがどのように表示されるかを監視できます。
DevToolsを使用すると、JavaScript、HTML、CSSなどのWebサイトのコードをリアルタイムで編集し、変更の結果を即座に取得できます。
DevToolsを介して行った変更は、Webサイトに永続的に影響を与えることはありません。実際のソースコードに適用したかのように、期待される結果を一時的に表示するだけです。これにより、Webサイトの読み込みを大幅に高速化し、バグの修正を容易にする方法を見つけることができます。
ChromeDevToolsにアクセスする方法
ChromeDevToolsにはいくつかの方法でアクセスできます。 Mac OSでショートカットメソッドを使用して開発者ツールを開くには、を押します。 Cmd + Opt + I 。 Windows OSを使用している場合は、 Ctrl + Shift + I キーボードのキー。
または、画面の右上隅にある3つのドットをクリックして、Chromeデベロッパーツールにアクセスすることもできます。に行く その他のツール 選択します 開発者ツール 。別のオプションは、Webページを右クリックして、 検査する オプション。
ウェブサイト診断のためのChromeデベロッパーツールの使用
Chrome DevToolsは、ウェブページを微調整してトラブルシューティングするためのいくつかの方法を提供します。 DevToolsがあなたを助けることができるいくつかの方法を見てみましょう。
あなたのウェブサイトがスマートフォンでどのように見えるかを見る
Chromeブラウザを開発者モードに切り替えると、ウェブページのハーフサイズバージョンがレンダリングされます。ただし、これではスマートフォンやタブレットでどのように表示されるかを実際に確認することはできません。
ありがたいことに、Chrome DevToolsでは、ウェブページの画面サイズを設定するだけでなく、さまざまなモバイル画面の種類やバージョンを切り替えることもできます。
そのオプションにアクセスするには、 検査する モード。次に、をクリックします レスポンシブ DevToolsの左上隅にあるドロップダウンで、お好みのモバイルデバイスを選択します。次に、選択したモバイルデバイスのサイズに合わせて、Webページがレンダリングおよび調整されます。
ディスク使用量100、ただしプロセスなし
Webページのソースファイルにアクセスする
Chrome DevToolsを介して、ウェブページを構成するファイルにアクセスできます。これらのファイルにアクセスするには、をクリックします ソース DevToolsメニューの上部にあるオプション。これにより、Webサイトのファイルシステムが公開され、編集も可能になります。
ソースファイルを検索することもできます。これは、多くのリソースがあるWebページを扱っているときに役立ちます。 DevToolsを介してソースファイルを検索するには、をクリックします。 検索 コンソールのすぐ上のオプション。
ただし、見つからない場合は 検索 オプションの場合、より良い代替手段はキーボードショートカットを使用することです。 Mac OSでは、を押します Cmd + Opt + F ソースファイルを検索するためのキー。 Windows OSを使用している場合は、を押します。 Ctrl + Shift + F ソースファイルの検索バーにアクセスするためのキー。
Webページのライブ編集を実行する
DevToolsを使用する主な目的の1つは、 ウェブページ上の要素のインスタント偽編集 。開発者ツールに切り替えると、をクリックしてWebサイトのHTMLコンテンツを編集できます。 要素 オプション。次に、コードエディタ内で変更を適用するポイントを右クリックし、[ HTMLとして編集 。
インラインではないCSSプロパティを編集するには、 ソース 。次に、編集するCSSファイルを選択します。コードコンソール内の選択した行にカーソルを置いて、ライブ編集を実行します。これを行うと、Webページに適用するスタイルの変更に関するフィードバックが即座に得られます。
DevToolsを使用してページを編集すると、ブラウザでページを再読み込みすると元の形式に戻り、編集内容は自分だけに表示されることに注意してください。 DevToolsを介した編集は、他のユーザーがそのWebサイトをスムーズに実行したり使用したりすることに影響を与えません。
DevToolsコンソールを使用してJavaScriptコードをデバッグする
JavaScriptをデバッグする最良の方法の1つは、Chromeの開発者ツールを使用することです。無効なスクリプトとバグの正確な場所を直接報告します。
JavaScriptを使用してWebサイトを設計するときは、常にDevToolsを開いたままにしておくことをお勧めします。たとえば、 console.log（） 一連の命令でJavaScriptを実行すると、プログラムが正常に実行された場合に、そのログの結果がDevToolsコンソールに表示されます。
デフォルトでは、コンソールはWebサイト上のJavaScriptの問題を報告します。 DevToolsの下部にあるコンソールを見つけるか、をクリックしてコンソールにアクセスできます。 コンソール ChromeDevToolsウィンドウの上部にあるオプション。
データベースからのリソースの読み込みを監視する
JavaScriptのデバッグに加えて、コンソールはWebサイトのデータベースから正しくロードされていないリソースの詳細を提供することもできます。
これはバックエンドの問題をデバッグするための最良の方法であるとは限りませんが、それでもどのリソースが 404 これらの要素のデータベースクエリを実行した後のエラー。
関連：一般的なウェブサイトのエラーとその意味
Chromeデベロッパーツールの向きを切り替える
Chromeデベロッパーツールの位置を変更するには、DevTools内の3つのメニュードットをクリックします（ブラウザのメインドットではありません）。次に、からお好みの位置を選択します ドック側 オプション。
ChromeDevTools拡張機能をインストールする
ChromeDevToolsで動作する言語またはフレームワーク固有の拡張機能をインストールすることもできます。これらの拡張機能をインストールすると、Webページをより効率的にデバッグできます。
ChromeのChromeDevToolsで利用可能な拡張機能のリストにアクセスできます 注目のDevTools拡張機能 ギャラリー。
Webサイトのセキュリティ問題を確認する
Chrome DevToolsを使用すると、の可用性などのパラメータに基づいて、ウェブサイトの安全性を評価できます Webセキュリティ証明書 とりわけ、接続の安全性。あなたのウェブサイトが安全であるかどうかを確認するには、をクリックしてください 安全 DevToolsの上部にあるオプション。
NS 安全 タブには、Webサイトのセキュリティの詳細の概要が表示され、潜在的な脅威が表示されます。
あなたのウェブサイトを監査する
Chrome DevToolsには、特定のパラメーターに基づいてWebサイトの全体的なパフォーマンスを確認できる機能があります。
その機能にアクセスするには、 灯台 DevToolsウィンドウの上部にあるオプション。次に、確認するパラメータを選択し、次のいずれかにチェックマークを付けます。 モバイル また デスクトップ さまざまなプラットフォームでWebページがどのように機能するかを確認するためのオプション。
次に、をクリックします レポートを生成する 以前に選択したパラメーターに基づいてWebページの分析を実行します。
をクリックして、Webサイトの実行時または読み込みパフォーマンスを評価することもできます。 パフォーマンス オプション。テストを実行するには、横にあるアイコンをクリックします 録音ボタンをクリックします ランタイム分析を実行するオプション。または、その下にあるリロードボタンをクリックして、ロード時のパフォーマンスを評価します。クリック やめる アナライザーを停止して結果を表示します。
ChromeDevToolsを活用する
Chrome DevToolsを使用すると、必要な目的に応じて、単純なWebサイトのデバッグ以上のことができます。ありがたいことに、DevToolsはすべてのスキルレベルのプログラマーにとって使いやすいです。アクセスしたWebサイトのソースコードを調べることで、Webサイトのフロントエンド開発の基本を学ぶこともできます。
iphone vssamsungどちらが良いか
また、この記事で説明しなかった他のいくつかのオプションを発見するかもしれません。したがって、利用可能な機能を自由に試してみてください。さらに、これらの機能を微調整しても、Webサイトに少し害はありません。
共有 共有 つぶやき Eメール RaspberryPiでChromeOSを使用する方法Chromebookを買う余裕はありませんか？ Raspbianに代わるものをお探しですか？ RaspberryPiにChromeOSのバージョンをインストールする方法は次のとおりです。
次を読む 関連トピック- インターネット
- プログラミング
- HTML
- ウェブ開発
- JavaScript
- グーグルクローム
Idowuは、スマートな技術と生産性に情熱を注いでいます。暇なときは、コーディングで遊んだり、退屈したときにチェス盤に切り替えたりしますが、たまに日常から離れることも大好きです。現代のテクノロジーの周りの道を人々に示すことへの彼の情熱は、彼がもっと書くように動機づけます。
IdowuOmisolaのその他の作品ニュースレターを購読する
ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。
購読するにはここをクリックしてください