Chrome console_html/css_WEB-ITnose の不完全なガイド

この記事は http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html から転載されています

Chrome の開発者ツールは非常に強力なので、特にユーザーの友人はいません。豊富な機能とユーザーフレンドリーなインターフェイスを備えたコンソールは、適切に使用すると次のような効果をもたらします:

より高い「レベル」、より高速な「開発とデバッグ」、より強力な「高度なフロントエンダー」

バグが隠れる場所がない「コンソールは素晴らしい」

console.log

ログは誰でも使えますが、console.error、console.warn などを使いこなしてコンソールに出力される情報を分類、整理している人は少ないです。
それらの機能に大きな違いはありません。重要なのは、コンソールに出力される情報を分類すること、またはよりセマンティックにすることです。
それぞれが表すセマンティクスは以下のとおりです。

console.log: 通常の情報

console.info: プロンプト情報

console.error: エラーメッセージ

console.warn: 警告情報

上記のログメソッドが適切に使用すると、コンソール上で特定の種類の情報を簡単に選択して表示できます。

console.log('一颗红心向太阳','吼吼~'); console.info('楼上药不能停！'); console.warn('楼上嘴太贱！'); console.error('楼上关你毛事？');

console.group および console.groupEnd と組み合わせると、この分類管理の考え方を極限まで高めることができます。多くのモジュールを含む大規模で複雑なWeb APPを開発する場合に、各ログ情報をそれぞれの名前空間にちなんだグループにまとめるのに適しています。

console.group("app.foo"); console.log("来自foo模块的信息 blah blah blah..."); console.groupEnd(); console.group("app.bar"); console.log("来自bar模块的信息 blah blah blah..."); console.groupEnd();

console.log に関しては、すでに破壊されています。すべては、このような API を提供する Chrome から来ています。最初のパラメータには、%c などのいくつかの書式設定命令を含めることができます。

たとえば、Hello World 用の美しいウェディング ドレスを作成して、人々に見せてみましょう:

console.log('%chello world','font-size:25px;color:red;');

それが十分に楽しいものではないと感じる場合は、グラデーションなど、作成できる最も豪華な CSS スタイルを適用してください。したがって、次の素晴らしい効果を得ることができます:

console.log('%chello world', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

さまざまな大きな動きのリズム~

上記の密集したコードを見てパニックにならないでください。上記の console.log() の 2 番目のパラメーターはすべて純粋な CSS です。スタイルをコントロールするには、スタイルに慣れる必要があります。最初のパラメータには、上記のスタイル付きテキストを出力するときに使用される %c コマンドなど、パーセント記号で始まるエスケープ コマンドを含めることができます。詳しい手順については、公式 API ドキュメントのこの表を参照してください。

それが十分に面白くない場合は、写真でもいいので記録しましょう。 。 。 GIF?
はい、まず写真を用意する必要があります。例としてこの写真を見てみましょう。

console.log("%c", "padding:50px 300px;line-height:120px;background:url('http://wayou.github.io/2014/09/10/chrome-console-tips-and-tricks/rabbit.gif') no-repeat;");

上で揺れるドビーラビットを見て、顔を平手打ちしたい衝動に駆られませんか？

さらに、console.table はデータをテーブル形式で直接出力します。
以前に書いたブログ投稿から例を借用します:

var data = [{'品名': '杜雷斯', '数量': 4}, {'品名': '冈本', '数量': 3}]; console.table(data);

さらに、console.log() はカンマで区切られた不定のパラメータを受け取り、最終的な出力ではそれらを空白文字で接続します。

console.log('%c你好','color:red;','小明','你知道小红被妈妈打了么');

console.assert

情報をコンソールに出力する前にコードが特定の条件を満たすようにしたい場合、その目的を達成するために if または 3 項式を使用する必要はありません。シナリオ 受信した式を最初にアサートし、式が false の場合にのみ対応する情報をコンソールに出力する優れたツール。

var isDebug=false; console.assert(isDebug,'开发中的log信息。。。');

console.count

条件付き出力のシナリオに加えて、カウントの一般的なシナリオもあります。

特定のコードが実行された回数をカウントしたい場合、関連するロジックを自分で記述する必要はありません。組み込みの console.count はそのようなタスクをうまく処理できます。

function foo(){ //其他函数逻辑blah blah。。。 console.count('foo 被执行的次数：'); } foo(); foo(); foo();

console.dir

DOM ノードを JavaScript オブジェクトの形式でコンソールに出力します

そして console.log は、表示されているものと同じ DOM ツリーの構造で DOM ノードを直接出力します要素検査中 構造は一貫しています。さまざまなプレゼンテーション形式、同じエレガントさ、さまざまなポジションを選択できるとにかく便利で思いやりがあります。

console.dir(document.body); console.log(document.body);

console.time & console.timeEnd

コンソールの最も一般的に使用される機能は、デバッグ情報の出力です。もちろん、その機能はそれだけではありません。パフォーマンス テストを行う場合も、ここで簡単に実行できます。

たとえば、コードの実行にかかる時間を考慮する必要がある場合、console.time と console.timeEnd を使用してこれを行うことができます。

ここに公式ドキュメントから借用した例があります:

console.time("Array initialize"); var array= new Array(1000000); for (var i = array.length - 1; i >= 0; i--) { array[i] = new Object(); }; console.timeEnd("Array initialize");

もちろん、時間に合わせて独自のコードを書くことも選択できます:

var start=new Date().getTime(); var array= new Array(1000000); for (var i = array.length - 1; i >= 0; i--) { array[i] = new Object(); }; console.log(new Date().getTime()-start);

また、 console.time が組み込まれているため、時間を節約できます。自分で計算するコードを作成する手間が省けます。組み込みの console.time を呼び出して得られる結果は、手動で計算された時差よりも正確で信頼性が高いことにも言及する価値があります。

console.profile & console.timeLime

CPU 使用率に関連する情報を表示したい場合は、console.profile を console.profileEnd と一緒に使用して、この要件を完了できます。

この機能は UI インターフェースを通じて実行できます。Chrome 開発者ツールには「プロファイル」というタブがあります。

与此类似的功能还有console.timeLine配合 console.timeLineEnd,它的作用是开始记录一段时间轴，同样可以通过Chrome开发者工具里的Timeline 标签来进行相应操作。

所以在我看来这两个方法有点鸡肋，因为都可以通过操作界面来完成。但至少他提供了一种命令行方式的交互，还是多了种姿势供选择吧。

console.trace

堆栈跟踪相关的调试可以使用console.trace。这个同样可以通过UI界面完成。当代码被打断点后，可以在Call Stack面板中查看相关堆栈信息。

上面介绍的都是挂在window.console这个对象下面的方法，统称为Console API，接下来的这些方法确切地说应该叫命令，是Chrome内置提供，在控制台中使用的，他们统称为Command Line API。

$

似乎美刀总是被程序员及各种编程语言所青睐「你看看PHP代码就知道PHPer有多爱钱了」，在Chrome的控制台里，$用处还真是蛮多且方便的。
$_命令返回最近一次表达式执行的结果，功能跟按向上的方向键再回车是一样的，但它可以做为一个变量使用在你接下来的表达式中：

2+2//回车，再 $_+1//回车得5

上面的$_需要领悟其奥义才能使用得当，而$0~$4则代表了最近5个你选择过的DOM节点。
什么意思？在页面右击选择审查元素，然后在弹出来的DOM结点树上面随便点选，这些被点过的节点会被记录下来，而$0会返回最近一次点选的DOM结点，以此类推，$1返回的是上上次点选的DOM节点，最多保存了5个，如果不够5个，则返回undefined。

另外值得一赞的是，Chrome 控制台中原生支持类jQuery的选择器，也就是说你可以用$加上熟悉的css选择器来选择DOM节点，多么滴熟悉。

$('body')

$(selector)返回的是满足选择条件的首个DOM元素。
剥去她伪善的外衣，其实$(selector)是原生JavaScript document.querySelector() 的封装。
同时另一个命令$$(selector)返回的是所有满足选择条件的元素的一个集合，是对document.querySelectorAll() 的封装。

$$('div')

copy

通过此命令可以将在控制台获取到的内容复制到剪贴板。

copy(document.body)

然后你就可以到处粘了：

看完此条命令行，机智的你是不是跟脑洞全开的我一样，冒出了这样一个想法：那就是通过这个命令可以在JavaScript里进行复制操作从而不用依赖Flash插件了。
But现实是残酷的，如之前所述的，这里的控制台命令只能在控制台中环境中执行，因为他不依附于任何全局变量比如window，所以其实在JS代码里是访问不了这个copy方法的，所以从代码层面来调用复制功能也就无从谈起。但愿有天浏览器会提供相应的JS实现吧~

keys & values

这是一对基友。前者返回传入对象所有属性名组成的数据，后者返回所有属性值组成的数组。具体请看下面的例子：

var tboy={name:'wayou',gender:'unknown',hobby:'opposite to the gender'}; keys(tboy); values(tboy);

monitor & unmonitor

monitor(function)，它接收一个函数名作为参数，比如function a,每次a被执行了，都会在控制台输出一条信息，里面包含了函数的名称a及执行时所传入的参数。

而unmonitor(function)便是用来停止这一监听。

function sayHello(name){ alert('hello,'+name); } monitor(sayHello); sayHello('wayou'); unmonitor(sayHello); sayHello('wayou');

debug & undebug

debug同样也是接收一个函数名作为参数。当该函数执行时自动断下来以供调试，类似于在该函数的入口处打了个断点，可以通过debugger来做到，同时也可以通过在Chrome开发者工具里找到相应源码然后手动打断点。
而undebug 则是解除该断点。

而其他还有好些命令则让人没有说的欲望，因为好些都可以通过Chrome开发者工具的UI界面来操作并且比用在控制台输入要方便。