Google Chromeは、その高度な機能により、Web開発で人気のあるWebブラウザの1つです。Chromeデベロッパーツール^{(Chrome Developer Tools)}は、デバッグ時に非常に役立ちます。私たちのほとんどは、 Chrome Dev Tools^{(Chrome Dev Tools)}を使用してライブCSSを編集できることをすでに知っていますが、本日共有するヒントが他にもあります。

Chrome開発ツールのヒント

Chrome Dev Toolsには未知の隠れたトリックがたくさんあり、その中で最も役立つトリックを調べていきます。Chromeでデベロッパーツールを開くには、キーボードのF12キーを押して、次のトリックを試してください。

1.任意のファイルを見つけて開きます

Web開発を行うときは、多くのHTML、CSS、JS、およびその他のファイルを処理します。何かをデバッグしたいときは、Chrome開発^{(Chrome Dev)}ツールを開きます。特定のファイルをすばやく検索して見つけて、作業を簡単にすることができます。Ctrl ^(Just)Ctrl + P を押して、ファイル名の入力を開始します。これは、ファイルのリストから特定のファイルを見つけるのに役立ちます。

2.ソースファイル内を検索します

前のトリックでは、特定のファイルを検索する方法を知るようになりました。ロードされたすべてのファイルで特定の文字列を検索することもできます。Ctrl + Shift + F を押して、ファイル内の文字列を検索します。正規表現もサポートしています。

3.特定の行に移動します

ソースファイルを開いて特定の行に移動したい場合は、Ctrl + G を押して行番号を入力し、Enterキーを押します。

4.[コンソール^(Console)]タブでのDOM要素の選択

開発ツール^{(Dev Tools)}では、コンソールで要素を選択することもできます。

• $() – 一致するCSSセレクターの最初の出現を返します。^(Returns)
• $$() – CSSセレクターに一致する要素の配列を返します。

その他のコンソールコマンドについては、この投稿にアクセスしてください。^{(this post.)}

5.複数のカレットを利用する

複数のカレットをさまざまな場所に設定したい場合があります。これは、 Ctrl^{(Ctrl )}キーを押しながら配置する場所をクリックすることで、 Chrome開発^{(Chrome Dev)}ツールで簡単に行うことができます。次に、書き込みを開始すると、選択したさまざまな場所に配置されていることがわかります。

6.ログを保存する

ログの保存^(Preserve)は、ページが読み込まれた場合でもログを保持するのに役立ちます。コンソール^(Console)ログの[ログの保存^{(Preserve log )}]の横にあるオプションをオンにすると、ログが保存されます。これにより、ページがアンロードされる前にログが表示され、バグの調査に役立ちます。

7.組み込みのコードビューティファイアを使用する

Chrome Dev Toolsには、 ^{(Chrome Dev Tools)}pretty print“ {}”と呼ばれるコードビューティファイアが組み込まれています。開発者ツールは最小化されたコードを表示し、読みやすくありません。開いたソースファイルの左下に表示されているきれいな印刷ボタンをクリックして、人間が読める形式でソースファイルを表示します。^(Click)

8.あなたのウェブサイトはモバイルフレンドリーですか？こちらで確認してください

Chrome Dev Toolsを使用すると、ウェブサイトがモバイル対応かどうかを確認することもできます。さまざまなデバイスでWebサイトがどのように表示されるかを確認できます。Chrome Devツールに移動すると、[エミュレーション^{(Emulation )}]タブでさまざまなデバイスをファイリングできます。必要なデバイスを選択し、そのデバイスでWebサイトがどのように表示されるかをテストします。

詳細については、次のビデオをご覧ください。

9.センサーと地理的位置をエミュレートする^{(Geographical Location)}

タッチスクリーンや加速度計などのセンサーをエミュレートすることもできます。地理的な場所をエミュレートすることもできます。これを行うには、Emulation -> Sensors.

10.現在の単語の次の出現を選択します

単語を置き換える場合は、そのすべての単語を選択し、Ctrl + D を押して、選択した単語の次の出現を選択します。次に、その単語のすべての出現箇所を1回で編集できます。

11.カラーフォーマットの変更

Shift + Click するだけで、rgba、16進数、hslのフォーマット間の変更を変更できます。

12.ワークスペースを介してローカルファイルに変更を追加します^(Add)

Chrome Devツールでソースファイルを編集したり、CSS、JavaScript、その他のファイルに変更を加えたりすることができます。これらの変更をローカルファイルに追加するために、ワークスペースからディスク上のファイルに変更をコピーして貼り付ける必要はありません。Chrome開発^{(Chrome Dev)}ツールを使用すると、ファイルを照合し、開発ツールで行った変更でローカルファイルを更新できます。これを行うには、[ソース^{(Sources )}]タブの左側にあるソースファイルを右クリックし、 [フォルダーをワークスペースに追加]を選択します。^{(Add Folder to workspace.)}

お役に立てれば。

Chrome Development Tools Tutorials, Tips, Tricks

Google Chrome is one оf the popular web browsers fоr web development, due to its аdvanced features. Chrome Developer Tools can be very useful while debugging. Most of us already know that we can edit the live CSS using Chrome Dev Tools, but there are more tips that we will share with you today.

Chrome Development Tools tips

There are many unknown and hidden tricks of Chrome Dev Tools and we will be looking in to the most useful tricks among them. To open the developer tools in Chrome, press F12 on your keyboard and try out the following tricks.

1. Find and Open any file

When we are doing web development we deal with many HTML, CSS, JS, and other files. When we want to debug anything, we open Chrome Dev tools. You can quickly search and find the particular file to make your job easier. Just, press Ctrl + P and start typing the file name. This helps you to find the particular file from the list of files.

2. Search within the source file

In the previous trick, we came to know how to search for a particular file. You can even search for a particular string in all the loaded files. Press Ctrl + Shift + F to search for a string in files. It also supports regular expressions.

3. Go to a particular line

Once you have opened any source file and want to move to a particular line, then press Ctrl + G and give the line number and hit enter.

4. Selecting DOM Elements in the Console tab

Dev Tools also allows you to select elements in the console.

• $() – Returns the first occurrence of the matching CSS selector.
• $$() – It returns the array of elements matching the given CSS selector.

For more console commands, head over to this post.

5. Make use of multiple carets

Sometimes, you want to set the multiple carets at different places and you can do that easily in Chrome Dev tools by holding the Ctrl key and clicking where you want to place them. Then start writing and you will see that is placed at various places selected.

6. Preserve Log

Preserve log helps you to persist the log even the page is loaded. Check the option beside Preserve log in the Console log and the log is preserved. This shows up the log before the page in unloaded and helpful to investigate the bugs.

7. Use built-in code beautifier

Chrome Dev Tools has the built-in code beautifier called pretty print “{}”. The developer tool shows the minimized code and is not so easy to read. Click on the pretty print button which is shown on the bottom left on the opened source file, to show the source file in the human-readable format.

8. Is your website mobile friendly? Check it here

Chrome Dev Tools also allows us to check whether a website is mobile-friendly or not. You can check how your website looks on various devices. Head over to Chrome Dev tools and under Emulation tab, you can file various devices. Select the device you want and test how your website looks on that device.

For more information, have a look at the following video.

9. Emulate Sensors and Geographical Location

You can even emulate the sensors like touch screens and accelerometers. You can even emulate the geographical location. To do this, head over to Emulation -> Sensors.

10. Select the next occurrence of the current word

If you want to replace the word In all of its occurrence, then select the word and press Ctrl + D to select the next occurrence of the selected word. Then, you can edit that word in all of its occurrences in one shot.

11. Alter Color Format

Just use Shift + Click on the color preview to change alters among rgba, hexadecimal and hsl formatting.

12. Add changes to local files through the workspace

We are able to edit source files and making some changes in CSS, JavaScript and other files in Chrome Dev tools. To add these changes to the local files, then there is no need to copy-paste the changes from workspace to files on disk. Chrome Dev tools allow you to match files and update the local file with the changes you have done in dev tools. To get this done right click on the source file on the left side on the Sources tab and select Add Folder to workspace.

Hope this helps.

Related posts

• Windows PCのための最高のGoogle Chrome Tips and Tricks

• 付箋を使用するための3つの便利なヒントとコツ

• Developer Toolsを使用してWebsiteからFontをダウンロードする方法

• Restart Chrome、Edge or Firefox Windows 11/10でタブを失うことなく

• Google Chrome browserのInspect Elementの使用に関するヒント

• YouTubeの自動再生が機能しない問題を修正

• 簡単な質問：Cookieとは何ですか？Cookieは何をしますか？

• どのバージョンのChromeがありますか？見つける6つの方法

• Chrome、Firefox、Edge、およびOperaのサードパーティ製クッキーをブロックする方法

• Androidメッセージを使用してコンピューターからテキストを送信する方法

• Chrome、Firefox、Edge、およびOperaのincognitoへの行き方

• Chrome、Safari、Edge and Firefoxで閉じたBrowser Tabを再度開く方法

• Google ChromeをDark Modeに入れる方法

• Google ChromeのFix Twitch Error 2000の方法

• 問題の修正：ウェブサイトにアクセスすると、Google Chromeが大量のプロセッサ（CPU）を使用します

• Google ChromeでAdobe Flash Playerをブロック解除する方法

• AndroidのChrome通知をオフにする方法：完全なガイド

• ChromeのSpecific Websites for Flashを有効にします

• Chromeを停止する方法パスワードを保存してください

• Windows 10 PCでGoogle Input Toolsを使用する方法