https://github.com/zetavg/chrome-devtools-hack

Hacks for Google Chrome DevTools.
https://github.com/zetavg/chrome-devtools-hack

Last synced: 4 months ago
JSON representation

Hacks for Google Chrome DevTools.

• Host: GitHub
• URL: https://github.com/zetavg/chrome-devtools-hack
• Owner: zetavg
• Created: 2014-04-30T06:09:05.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2014-05-27T21:01:48.000Z (about 11 years ago)
• Last Synced: 2025-02-15T12:56:53.138Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 172 KB
• Stars: 12
• Watchers: 2
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
chrome-devtools-hack

====================

Some hacks for Google Chrome DevTools.

*By [impersonating the DDC extension](http://stackoverflow.com/questions/17042547/how-to-inject-javascript-into-chrome-devtools-itself), this extension gains permission to inject JavaScript into DevTools, providing some additional features.*

## To Install

> 打開 Chrome 的擴充功能設定，開啓開發人員模式，載入未封裝擴充功能。

1. Download the code, e.g. `git clone https://github.com/Neson/chrome-devtools-hack.git`

2. Navigate to `chrome://extensions` in Chrome

3. Check the `Developer mode` check box located on the top-right corner

4. Click the `Load Unpacked Extension...` button

5. Chose the folder of downloaded code

6. Open the devtools on any page to check if it's working

## Hacks

### CSS property quick-search

![css quick-search](http://i.imgur.com/GsJYqGY.gif)

Fuzzy search of css matching rules listed in styles panel.

### Custom Shortcuts

|                                | Windows / Linux | Mac    |

| ------------------------------ | --------------- | ------ |

| Select node to inspect         | `Ctrl+Alt+C`    | `⌥⌘C`  |

| Toggle inspector position      | `Ctrl+Alt+L`    | `⌥⌘L`  |