Chrome控制檯使用詳解
轉自
http://www.codeceo.com/article/chrome-console.html
Chrome的開發者工具已經強大到沒朋友的地步了,特別是其功能豐富介面友好的console,使用得當可以有如下功效:
- 更高「逼格」更快「開發除錯」更強「進階級的Frontender」
- Bug無處遁形「Console大法好」
console.log
大家都會用log,但鮮有人很好地利用console.error
, console.warn
等將輸出到控制檯的資訊進行分類整理。
他們功能區別不大,意義在於將輸出到控制檯的資訊進行歸類,或者說讓它們更語義化。
各個所代表的語義如下:
console.log
console.info
:提示類資訊console.error
:錯誤資訊console.warn
:警示資訊
當合理使用上述log方法後,可以很方便地在控制檯選擇檢視特定型別的資訊。
console.log('一顆紅心向太陽','吼吼~'); console.info('樓上藥不能停!'); console.warn('樓上嘴太賤!'); console.error('樓上關你毛事?');
如果再配合console.group
與console.groupEnd
,可以將這種分類管理的思想發揮到極致。這適合於在開發一個規模很大模組很多很複雜的Web
APP時,將各自的log資訊分組到以各自名稱空間為名稱的組裡面。
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
,早已被玩兒壞了。一切都源於Chrome提供了這麼一個API:第一個引數可以包含一些格式化的指令比如%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()
第二個引數全是純CSS用來控制樣式的,你不會陌生。而第一個引數裡可以帶用百分號開頭的轉義指令,如上面輸出帶樣式的文字時使用的%c
指令。更詳細的指令參見官方API文件的這個表格。
如果還不夠過癮,那咱們來log一些圖片吧,甚至。。。動圖?
對,你得先有圖,我們拿這張圖為例。
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
或者三元表示式來達到目的,cosole.assert
便是這樣場景下一種很好的工具,它會先對傳入的表示式進行斷言,只有表示式為假時才輸出相應資訊到控制檯。
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 開發者工具裡面有個tab便是Profile
。
與此類似的功能還有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介面來操作並且比用在控制檯輸入要方便。
相關推薦
javascript:控制檯詳解
javascript工具——瀏覽器控制檯詳解 大神這篇部落格是寫在2011年,主要介紹 “Firefox” 瀏覽器外掛 “Firebug” 的操作,如今主流瀏覽器對控制檯都已
Chrome控制檯使用詳解
轉自 http://www.codeceo.com/article/chrome-console.html Chrome的開發者工具已經強大到沒朋友的地步了,特別是其功能豐富介面友好的console,使用得當可以有如下功效: 更高「逼格」更快「開發除錯」更強「進階
Chrome調試折騰記_(1)調試控制中心快捷鍵詳解!!!
相同 展示 移動 匹配 tails detail 快速 常用 不同 轉載:http://blog.csdn.net/crper/article/details/48098625 大多瀏覽器的調試功能的啟用快捷鍵都一致…按下F12;還是熟悉的味道; 或者直接 Ctrl
content = "IE=edge,chrome=1" 詳解
serve 原來 做了 微軟 coo started 頭文件 env 服務 < meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" /> 這是個是IE8的專用標記,用來指定IE8瀏覽
Chrome控制臺使用詳解
計時 size 你好 不用 結果 left kit all 連接 Chrome控制臺使用詳解 轉自 http://www.codeceo.com/article/chrome-console.html Chrome的開發者工具已經強大到沒朋友的地步了,特別是其功能豐富界
Chrome開發者工具詳解(2)-Network面板
eth 令行 完全 ssi .cn mco tools 命令 code 註: 這一篇主要講解面板Network,參考了Google的相關文檔,主要用於公司內部技術分享。 Chrome開發者工具面板 面板上包含了Elements面板、Console面板、Sources面板
Chrome開發者工具詳解(1)-Elements、Console、Sources面板
Chrome開發者工具詳解(1)-Elements、Console、Sources面板 Chrome開發者工具面板 面板上包含了Elements面板、Console面板、Sources面板、Network面板、Timeline面板、Profiles面板、Application面板、Secur
利用chrome瀏覽器進行js除錯並找出元素繫結的點選事件詳解
大家有沒有遇到這樣的一個問題,我們在分析一些大型電子商務平臺的Web前端指令碼時,想找到一個元素繫結的點選事件,並不是那麼容易,因為有些前端指令碼封裝的比較隱蔽,甚至有些加密指令碼,用傳統的查詢元素ID、或者頁面原始碼方法去找,可能最後徒勞無功。下面我來介紹利用chrome瀏覽器來查詢元素繫
chrome devtools使用詳解——Performance
本文是學習&研究筆記,若有錯誤還請指正! 相關文章 Elements篇 Sources篇 當頁面卡頓、慢時可以使用Performance來分析問題原因所在。 面板 Performance,即執行時效能表現,面板如下: 使用 使用隱身視
Python爬蟲--http詳解及chrome響應URL過程
什麼是http和https協議: 1.HTTP協議:全稱是HyperText Transfer Protocol,中文意思是超文字傳輸協議,是一種釋出和接收HTML頁面的方法。伺服器埠號是80埠。 2.HTTPS協議:是HTTP協議的加密版本,在HTTP下加入了SSL層。
用Chrome進行JavaScript的各種除錯詳解
Sources Panel 的左邊是內容源,包括頁面中的各種資源。其中,又分 Sources 和 Content scripts。Sources 就是頁面本身包含的各種資源,它是按照頁面中出現的域來組織的,這是我們要關注的。非同步載入的 js 檔案,在載入後也會出現在這裡的。Content script
js滑鼠滾輪事件詳解(全相容ie、chrome、firefox)實現圖片縮放
以前看到的都是用IE的zoom,所以非IE就不支援,昨天看到這個js中滑鼠滾輪事件詳解,於是完全相容(IE6-8,FF,Chrome,Opera,Safari)的滑鼠滾軸縮放圖片效果今天就誕生了 ====程式碼如下: var zooming=function(e){ e=window.event
全網最詳細的如何在谷歌瀏覽器里正確下載並安裝Postman【一款功能強大的網頁除錯與傳送網頁HTTP請求的Chrome外掛】(圖文詳解)
不多說,直接上乾貨! 想必,玩過Java Web的你,肯定是對於http post和get等請求測試的過程記憶猶新吧。 Postman的安裝方法分好幾種,主要分為兩種安裝模式介紹: (1)chrome瀏覽器postman 外掛安裝 【本
chrome-除錯按鈕詳解
在爬蟲開發過程中,form表單中一些引數是通過加密後實現的,因此需要快速找到加密過程,這就需要對js進行除錯了。 一.如何快速定位查詢資料 1.進入console面板,快捷鍵:ctrl+shift+F鍵進入search搜尋框,輸入搜素內容,就會在所有下載的資源內搜素目標字串。 2
chrome--瀏覽器除錯工具詳解
chrome瀏覽器開發除錯工具開啟方式:F12鍵 一,常用面板介紹 1.定位小箭頭按鈕(左邊第一個): 選中Elements面板,並啟動該按鈕,可以在頁面中定位相應元素的原始碼位置,或者選擇原始碼位置可定位到頁面相應的元素。 2.手機-PC檢視切換按鈕(左邊第二個): 啟動該按
JAVA基礎_Java IO流 控制檯到記事本、記事本到控制檯及詳解
Java IO流 控制檯到記事本、記事本到控制檯及詳解 1. 從記事本讀資料 import java.io.BufferedReader; import java.io.FileInputStream; import java.io.FileNotF
Chrome F12 谷歌開發者工具詳解 Network
開發者工具初步介紹 chrome開發者工具最常用的四個功能模組: Elements:主要用來檢視前面介面的html的Dom結構,和修改css的樣式。css可以即時修改,即使顯示。大大方便了開發者除錯頁面,這真是十分友好的~ console:這個除了檢
【計算機網路】:SMTP協議詳解(如何在控制檯發郵件)
SMTP的連線和傳送過程 (a)建立TCP連線 (b)客戶端傳送HELO命令以標識發件人自己的身份,然後客戶端傳送MAIL命令; 伺服器端正希望以OK作為響應,表明準備接收 (c)客戶端傳送RCPT命令,以標識該電子郵件的計劃接收人,可以有多
linux下tty,控制檯,虛擬終端,串列埠,console(控制檯終端)詳解
首先: 1。終端和控制檯都不是個人電腦的概念,而是多人共用的小型中型大型計算機上的概念.一臺主機,連很多終端,終端為主機提供了人機介面,每個人都通過終端使用主機的資源. 終端有字元啞終端和圖形終端兩種.控制檯是另一種人機介面, 不通過終端與主機相連, 而是通過顯示卡-顯示器和
RDS-SQL SERVER使用者控制檯監控資訊詳解
RDS-SQL SERVER使用者控制檯監控資訊詳解 一. 工具 Microsoft SQL Server 2008R2 提供了一些工具來監控資料庫。方法之一是動態管理檢視。動態管理檢視 (DMV)返回的伺服器狀態資訊可用於監控伺服器例項的執行狀況、診斷問題和優化效能。