Google Chromeのキャッシュの保存先を変更する

　Google Chromeには、次回のアクセス時にWebページを読み込む時間を短くするため、Webページの一部を保存するキャッシュが用意されている。デフォルトでは、以下のフォルダがキャッシュとして利用される。

%USERPROFILE%\AppData\Local\Google\Chrome\User Data\Default\Cache
※ %USERPROFILE%は環境変数。一般的には、C:\Users\＜ユーザー名＞

Google Chromeのデフォルトのキャッシュ保存先

 
Google Chromeのデフォルトのキャッシュ保存先フォルダ
デフォルトでは、［%USERPROFILE%］フォルダの下にキャッシュの保存先フォルダ（（1））が作成されている。キャッシュフォルダには、このようにキャッシュファイル（（2））が作成される。残念ながらファイルを開いただけでは、キャッシュされた画像などを取り出すことはできない。

　このキャッシュの保存先をSSDやRAMディスクなどの高速なストレージに変更すれば、Google Chromeの表示を高速化できる。またC:ドライブの容量が小さいような場合には、別のドライブを指定することでキャッシュがディスク容量を圧迫するのを防ぐことも可能だ。

　保存先を変更するには、Google Chromeを起動する際に「--disk-cache-dir="＜保存先＞"」オプションを付ければよい。Google Chromeのショートカットを作成し、リンク先にオプションを指定しておくのがよいだろう。その手順は以下の通りだ。

 
Google Chromeのキャッシュの保存先を変更する手順
Google Chromeのショートカットにオプションを付けることで、キャッシュの保存先を変更できる。
　 （1）Google Chromeのショートカットを作成する。
　 （2）右クリックメニューから［プロパティ］を選択する。
　 （3）［Google Chromeのプロパティ］ダイアログを開く。
　 （4）［ショートカット］タブを開く。
　 （5）「リンク先」を編集し、「--disk-cache-dir="＜保存先＞"」オプションを追加する。ここでは、保存先を［F:\RAMDisk\ChromeCache］フォルダにするとしている。

▼

 
変更したキャッシュの保存先フォルダ
オプション指定した［F:\RAMDisk\ChromeCache］フォルダ（（1））の下に［\Profile 1\Cache］フォルダ（（2））が作成され、このようにキャッシュ（（3））が作られる。

　なお事前にGoogle Chromeのバックグランド起動を終了した上で、デフォルトのキャッシュの保存先を削除またはリネームしておかないとキャッシュの保存先が変更できないので注意したい。

 

How to use Chrome DevTools like a Pro

As the name implies Chrome Developer Tools is a tool that allows web developers to interfere and manipulate applications via the browser. With this tool you can:

·         Manage interface problems

·         Debug Javascript Code with using breakpoints

·         Optimize your code

To open DevTools, you can right-click anywhere on the page and select inspect element or you can choose the "tools > developer tools" option from the top right menu.

1. Quick-edit a HTML Element

 

To try it:

·         Select the "Elements" panel.

·         Choose a DOM element within the Elements Panel editor.

·         Double click on the opening tag and edit it.

When you are finished, the closing tag is automatically updated.

2. Go to a Line Number

 

You can use this feature in the ":linenumber:columnnumber" format from the Sources panel.

To try it:

·         CMD + O

3. Expand All Child Nodes

 

To try it:

·         Select the "Elements" panel.

·         Choose a DOM element and Alt + Click the arrow within the Elements Panel editor to expand all child nodes.

4. Change DevTools Positions

 

To try it:

·         CMD + Shift + D

Dock options:

·         Undock DevTools

·         Dock to bottom

·         Dock to right

5. DOM Search by CSS Selectors

 

To try it:

·         CMD + F / CTRL + F and enter your class name or id name base search selector.

6. Material and Custom Color Palettes

 

You can click on the little switcher icon in front of hex code. you can choose from the following:

1.     Page Colors: This palette is auto generated from your web site (in your CSS).

2.   Material Design: This palette automatically generates primary colors from The Material Design palette.

7. Multiple Cursor

 

Move the cursor with the CMD + Click to add multiple cursors. You can also undo your last selection with CMD + U.

8. Copy Image as Data URI

 

To try it:

·         Select "Network" panel.

·         Choose your image within the Resources Panel

·         Right click and copy it as a Data URI (base 64 encoded)

9. Triggering of Pseudo Classes

 

To try it:

·         Right click in the left panel and select "Force Element State".

·         Alternatively, the toggle element state icon can be clicked in the right panel.

10. Column Selection by Dragging

 

To try it:

·         Select "Sources" panel.

·         Choose your file within the Sources Panel editor.

·         Hold Alt and dragging the mouse.

11. Get the current element with "$0"

 

To try it:

·         Select "Elements" panel.

·         Choose a DOM element within the Elements Panel editor.

·         Click Console and write $0 to access it.

12. Reveal in Elements

 

To try it, if you choose an a DOM node:

·         Right click on it within the Console panel.

·         Select "Reveal in Elements Panel".

13. View Event Listeners

 

To try it:

·         Select the "Elements" panel.

·         Navigate to the Event Listeners and choose an event.

·         You can also view source by right click and choose "Show Function Definition" in context menu.

14. Easing Previews

 

To try it:

·         Click the easing icon (purple icon) and see a preview.

·         You can view it via choose other previews or you can set new easing format.

15. Media Query

 

To try this:

·         In Device Mode, click the icon ('bars') in the upper left corner of the page.

·         Click the breakpoint ('blue', 'green', 'orange') bars and change.

If you right click on a bar, you can reveal its position within the source code.

16. Network Filmstrip

 

"Film Strip" shows page rendering screenshots and times from start to finish. You can click a screenshot and view in the timeline-style view.

To try this:

·         Select "Network" panel.

·         Click "Camera Icon".

·         Reload page.

17. Copy Response

 

You can copy the response/request headers of a network resource.

To try it:

·         Select "Network" panel.

·         Choose your file within the Resources Panel.

·         Right click and click "Copy Response".

18. Run Predefined Snippets

 

To try it:

·         In the left sidebar: Sources > Snippets

·         Right click > Select New

·         Enter a file name and write your snippets in the right panel

·         Right click on the snippet and select Run

19. Device Emulation Sensors

 

You can also simulate mobile devices sensors like:

·         Touch Screen

·         Geolocation Coordinates

·         Accelerometer

To try this:

·         Select "Elements" panel.

·         Click "Esc" and choose "Emulation > Sensors"

20. Workspaces

 

To try this:

·         Select "Sources" panel.

·         Right click within sources pane and choose "Add Folder to Workspace"

·         Choose your file and right click > Map to Network Resources

·         Change your file code and view it.

References:

·         https://developers.google.com/web/tools/chrome-devtools/

·         https://umaar.com/dev-tips/

 

Chrome デベロッパーツールの使い方: プロのように華麗に使いこなすための20のテクニック

Chromeのデベロッパーツールをプロのように使いこなすための20のテクニックを紹介します。
いやー、本当にデベロッパーツールは機能が豊富ですね。

How to use Chrome DevTools like a Pro

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

· HTMLの要素をクイック編集

· 指定した行番号に移動

· すべての子ノードを展開

· デベロッパーツールの位置を変える

· CSSのセレクタによるDOM検索

· Material Designとカスタムカラーパレット

· 複数のカーソル

· 画像をData URIとしてコピー

· 疑似クラスのトリガー

· 複数のコラムをドラッグで選択

· 「$0」で現在の要素を手に入れる

· 要素の表示

· 「Event Listeners」の表示

· イージングのプレビュー

· Media Queriesの検証

· ネットワークをフィルムストリップ表示

· レスポンスヘッダのコピー

· スニペットを試す

· モバイルデバイスのセンサーをシミュレート

· ワークスペース

· 参考

元記事とは関係ありませんが、こちらもオススメ。

·         Chromeのデベロッパーツールが見やすくなる！デベロッパーツールのUIをダーク系に変更する方法

HTMLの要素をクイック編集

·         「Elements」パネルを選択。

·         Elementsパネルエディタで、DOM要素を選択。

·         タグをダブルクリックすると、編集できます。

指定した行番号に移動

「Sources」パネルから「:行番号:桁位置」のフォーマットで利用できます。

·         Commnad + O

すべての子ノードを展開

·         「Elements」パネルを選択。

·         DOM要素を選択し、アローをAlt + クリック。

デベロッパーツールの位置を変える

·         Commnad + Shift + D

ドックのオプション

·         デベロッパーツールのドックを解除

·         ドックを下に

·         ドックを右に

CSSのセレクタによるDOM検索

·         Commnad + F / Ctrl + F して、class名やid名を入力して検索。

Material Designとカスタムカラーパレット

·         Page Colors

表示しているページから自動的に生成されたカラーパレットです。

·         Material Design

Material Design paletteから自動的に生成されたカラーパレットです。

複数のカーソル

複数のカーソルを加えるためには、Commnad + クリック でカーソルを動かします。Command + U で最後の選択を元に戻すことができます。

画像をData URIとしてコピー

·         「Network」パネルを選択。

·         リソースパネルから画像を選択。

·         右クリックで画像をData URI(base 64 encoded)でコピーできます。

疑似クラスのトリガー

·         左パネルを右クリックし、「Force Element State」を選択。

·         右パネルの「Force Element Stateから疑似クラスをクリックすることができます。

複数のコラムをドラッグで選択

·         「Sources」パネルを選択。

·         Sourcesパネルエディタでファイルを選択。

·         複数のコラムをAlt + ドラッグで選択できます。

「$0」で現在の要素を手に入れる

·         「Elements」パネルを選択。

·         ElementsパネルエディタでDOM要素を選択。

·         コンソールをクリックし、それにアクセスするために「$0」を書いてください。

要素の表示

·         Consoleパネル内で、右クリック。

·         「Reveal in Elements Panel」を選択。

「Event Listeners」の表示

·         「Elements」パネルを選択。

·         「Event Listeners」を操作して、イベントを選択。

·         右クリックでソースを表示し、コンテクストメニューから「Show Function Definition」を選択。

イージングのプレビュー

·         イージングアイコン（紫のアイコン）をクリックして、プレビューを表示。

·         選択したアニメーションの動きを見たり、他のイージングのフォーマットをセットすることができます。

Media Queriesの検証

·         「device mode」にして、左上角のバーのアイコンをクリック。

·         ブレイクポイントのバー（ブルー・グリーン・オレンジのバー）をクリック。

·         バーを右クリックすると、コードでの位置を確認できます。

ネットワークをフィルムストリップ表示

「フィルムストリップ」はページのレンダリングのスクリーンショットと時間を始めから終わりまで表示します。

·         「Network」パネルを選択。

·         カメラアイコンをクリック。

·         Command + R でページをリロード。

レスポンスヘッダのコピー

ネットワークリソースのレスポンスヘッダとリクエストヘッダをコピーすることができます。

·         「Network」パネルを選択。

·         リソースパネルからファイルを選択。

·         右クリックして「Copy Response」を選択。

スニペットを試す

·         「Sources」パネルを選択、左サイドバーから「Snippets」を選択。

·         右クリックして「New」を選択。

·         ファイル名を入力して、右パネルにスニペットを記述。

·         スニペットのファイル名を右クリックして「Run」を選択。

モバイルデバイスのセンサーをシミュレート

モバイルデバイスのセンサーをエミュレートできます。

·         タッチスクリーン

·         緯度経度情報

·         加速度計

·         「Elements」パネルを選択。

·         Escキーを押して下部のパネルを表示し、「Emulation」タブの「Sensors」を選択。

ワークスペース

·         「Sources」パネルを選択。

·         ソースパネルで右クリックして「Add Folder to Workspace」を選択。

·         ファイルを選択し、右クリックして「Map to Network Resources」を選択。

·         ファイルのコードを変更して、それを見てください。

参考

·         Chrome DevTools

·         Dev Tips