Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
692
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Organization

[翻訳]Chrome デベロッパーコンソール 意外と知られていない10の機能

Things you probably didn't know you could do with Chrome's Developer Consoleの抄訳。

1. jQueryが入っていなくても$$で同等のことができる

jQueryが入っていなくても$$('.hoge'), $$('#hoge'), $$('tagName')で同等のことができる(\$が2個であることに注意)。
$が1個の$('.hoge')も定義されているが、こちらは配列でなく1個の要素を返してくる。

2. ページを編集できる

document.body.contentEditable=true 

とすると、ブラウザ上であたかもテキストエディタのようにページを編集できるようになる。
このモードにいるときはページ内の要素がクリックに反応しなくなるので、

document.body.contentEditable=false

で元に戻せる。

3. 要素に結び付けられたイベントリスナを調べる

getEventListeners($('#firstName'))

image

4. イベント発生を監視してログ出力

  • monitorEvents($('selector'))で全てのイベントを監視
  • monitorEvents($('selector'),'eventName')で指定のイベントを監視
  • monitorEvents($('selector'),['eventName1','eventName3',….])で複数のイベントを指定
  • unmonitorEvents($('selector'))で監視解除

5. console.timeで所要時間を計測

console.time('myTime'); //Starts the timer with label - myTime

for(var i=0; i < 100000; i++){
  2+4+5;
}

console.timeEnd('myTime'); //Ends the timer with Label - myTime

//Output - myTime:12345.00 ms

6. オブジェクトの配列の場合はconsole.logよりconsole.tableの方が見やすい

var myArray=[{a:1,b:2,c:3},{a:1,b:2,c:3,d:4},{k:11,f:22},{a:1,b:2,c:3}]

のような場合はconsole.table(myArray)とすると

image

7. コンソールでもインスペクトができる

要素を右クリックして「検証」を選ぶ代わりに、コンソールでinspect($('selector'))としてもインスペクトできる。

8. dirで要素のプロパティの一覧を表示できる

dir($('selector'))

9. $_で最後に評価した値を取得できる

> 1+2
3
> $_
3

10. clear()でコンソールをクリアできる

clear()

より詳しく知りたい方はこちら
Chrome Command Line API Reference


訳者による番外

11. イベントに対してブレークポイントを設定できる

デベロッパーコンソール右端にあるEvent Listener Breakpointsでチェックをつけると、そのイベントのリスナーにブレークポイントを張れる。つまり、イベントが発生したときにブレークさせられる。

image

12. JSのソース中にdebugger文を書いておくとそこがブレークポイントになる

こんな感じ

console.log("hello");
debugger;
console.log("world!");

13. Cmd + Option + Fで全てのJSやCSSファイル内をgrepできる

14. Cmd + Pで全てのJSやCSSファイルをファイル名で絞り込み検索できる

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
692
Help us understand the problem. What are the problem?