chrome調試javascript詳解，chromejavascript

chrome調試javascript詳解，chromejavascript

一、Console API

Console.assert()

判斷第一個參數是否為真，false的話拋出異常並且在console輸出相應資訊。

Console.count()

以參數為標識記錄調用的次數，調用時在console列印標識以及調用次數。

Console.debug()

console.log方法的別稱，使用方法可以參考Console.log()

Console.dir()

列印一條以三角形符號開頭的語句，可以點擊三角展開查看對象的屬性。

Console.error()

列印一條錯誤資訊，使用方法可以參考 string substitution。

Console._exception()

error方法的別稱，使用方法參考Console.error()

Console.group()

列印樹狀結構，配合groupCollapsed以及groupEnd方法;

Console.groupCollapsed()

使用方法和group相同，不同的是groupCollapsed列印出來的內容預設是摺疊的。

Console.groupEnd()

結束當前Tree

Console.info()

列印以驚嘆號字元開始的資訊，使用方法和log相同

Console.log()

列印字串，使用方法比較類似C的printf格式輸出

Console.profile()

可以以第一個參數為標識，開始javascript執行過程的資料收集。和chrome控制台選項開Profiles比較類似，具體可參考chrome profiles

Console.profileEnd()

配合profile方法，作為資料收集的結束。

Console.table()

將資料列印成表格。Console.table [en-US]

Console.time()

計時器，接受一個參數作為標識。

Console.timeEnd()

接受一個參數作為標識，結束特定的計時器。

Console.trace()

列印stack trace.

Console.warn()

列印一個警告資訊，使用方法可以參考 string substitution。

二、用法

1、Console.log

舊版相容

if(!window.console){ window.console = {log: function(){} }; }

輸出對象

var someObject = { str: "Some text", id: 5 };console.log(someObject);//Object {str: "Some text", id: 5}

格式化

%s 格式string
%d or %i    格式int
%f  格式float
%o  格式Object對象
%O  格式object對象
%c  格式css

輸出對象

console.log("%o",document.body);console.log("%O",document.body);

console.log("%c",'padding:77px 219px; background:url(http://www.erongtu.com/application/uploads/ask/2015-10-20/5625a690f0ddd.jpg) no-repeat;line-height:166px;height:166px;');console.log("%d",5+5);console.log("%f",Math.PI);console.log("%s","This is a good idea");console.log("%cCss Style","text-shadow:1px 1px 1px rgba(0,0,0,2);font-size:40px");

Google chrome 46.0.2490.71 m 片出不來 

Firefox 41.0.2 下測試

不過網上有一個有趣的東西 console.image，chrome內建的有擴充 https://github.com/jffry/console.image-chrome-extension

console.image("http://i.imgur.com/hv6pwkb.png");
console.image("http://i.imgur.com/hv6pwkb.png");
console.image("http://i.imgur.com/hv6pwkb.png");
console.image("http://i.imgur.com/hv6pwkb.png");
原始碼地址：https://github.com/adriancooney/console.image

2、console.info/console.log

var car = "Dodge Charger";
var someObject = {str:"Some text", id:5};
console.info("My first car was a", car, ". The object is: ", someObject);
 
for (var i=0; i<5; i++) {
  console.log("Hello, %s. You've called me %d times.", "Bob", i+1);
}
console.log("I want to print a number:%d","string")

3、console.group/console.warn/console.time/console.debug

console.log("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.debug("Back to the outer level");
console.time("answer time");
alert("Click to continue");
console.timeEnd("answer time");

4、console.trace 在頁面console文檔中查看堆疊追蹤的詳細介紹和樣本.這個比較好用

foo();function foo() { function bar() {  console.trace(); } bar();}

5、console.assert/console.count/console.dirxml/console.dir/console.error

var list = document.querySelectorAll('div.rtmarg');console.assert(list[0].childNodes.length > 10 , "Oops,this is small");function login(user) {  console.count("Login called for user '" + user + "'");}login("join");login("join");login("join");login("chen");console.dir(document.body);function connectToServer() {  var errorCode = 1;  if (errorCode) {    console.error("Error: %s (%i)", "Server is not responding", 500);  }}connectToServer();var list = document.querySelectorAll("div.rtmarg");console.dirxml(list[0]);

6、Other Command Line API

inspect(document.body.firstChild);getEventListeners(document);var player1 = {  "name": "Ted",  "level": 42}keys(player1);function sum(x, y) {  return x + y;}monitor(sum);monitorEvents(window, "resize");

7、debugger 非常好用的一個工具

brightness = function() {   debugger;    var r = Math.floor(this.red*255);  var g = Math.floor(this.green*255);  var b = Math.floor(this.blue*255);  return (r * 77 + g * 150 + b * 29) >> 8;}brightness();

調試的時候還可以加斷點什麼的……

8、jquery相關  firequery

$.fn.log = function() {  if (window.console && console.log) {    console.log(this);  }  return this;}$('foo.bar').find(':baz').log().hide();

這樣就可以 easily check inside jQuery chains.

 

四、相關資源

Firefox
http://getfirebug.com/
(you can also now use Firefox's built in developer tools Ctrl+Shift+J (Tools > Web Developer > Error Console), but Firebug is much better; use Firebug)
Safari and Chrome
Basically the same.
https://developer.chrome.com/devtools/index
https://developer.apple.com/technologies/safari/developer-tools.html
Internet Explorer
Don't forget you can use compatibility modes to debug IE7 and IE8 in IE9 or IE10
http://msdn.microsoft.com/en-us/library/ie/gg589507(v=vs.85).aspx
http://msdn.microsoft.com/en-us/library/dd565628(v=vs.85).aspx
If you must access the console in IE6 for IE7 use the Firebug Lite bookmarklet
http://getfirebug.com/firebuglite/ look for stable bookmarklet
http://en.wikipedia.org/wiki/Bookmarklet
Opera
http://www.opera.com/dragonfly/
iOS
Works for all iPhones, iPod touch and iPads.
http://developer.apple.com/library/ios/ipad/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html
Now with iOS 6 you can view the console through Safari in OS X if you plug in your device. Or you can do so with the emulator, simply open a Safari browser window and go to the "Develop" tab. There you will find options to get the Safari inspector to communicate with your device.
Windows Phone, Android
Both of these have no console built in and no bookmarklet ability. So we use http://jsconsole.com/type :listen and it will give you a script tag to place in your HTML. From then on you can view your console inside the jsconsole website.
iOS and Android
You can also use http://html.adobe.com/edge/inspect/ to access web inspector tools and the console on any device using their convenient browser plugin.
Older browser problems
Lastly older browsers (thanks again Microsoft) will crash if you use console.log in your code and not have the developer tools open at the same time. Luckily its an easy fix. Simple use the below code snippet at the top of your code and good old IE should leave you alone:
 if(!window.console){ window.console = {log: function(){} }; }
This checks to see if the console is present, and if not it sets it to an object with a blank function calledlog. This way window.console and window.console.log is never truly undefined.
http://stackoverflow.com/questions/4539253/what-is-console-log
https://developer.chrome.com/devtools/docs/console-api#consolelogobject-object
https://developers.google.com/chrome-developer-tools/docs/console-api
http://getfirebug.com/wiki/index.php/Console_API
https://developer.chrome.com/devtools/docs/console-api
https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html
 https://developer.mozilla.org/zh-CN/docs/Web/API/Console