Google Chrome開發者工具教學 - Console

前言

嗨~又見面了，今天要來介紹前端工程師的另一位好朋友- Console! Console主要可以知道這個網頁的訊息，你各位一定會想說阿不就和Network一樣?不要騙文章偏數了，下去!好的大家冷靜，是很像沒有錯，但Console可以跟JavaScript互動!這就和Network不一樣了吧!到底哪裡不一樣就讓我們繼續看下去!

所以Console到底可以幹嘛?我就問

JavaScript是直譯式語言，所以如果在Console下JavaScript的命令就會立刻執行。Console 可以查看 JavaScript 對象的及其屬性，通過 JavaScript 訪問當前頁面的所有元素及進行 JavaScript 的任何操作，並且能夠立即執行 JavaScript 語句。舉例來說，我在學的時候最常使用的就是Console.log()，可以用來印出東西來確保現在的資料或情況是不是符合我的預期，以用來當成debug的工具。實際使用如下圖(講歸講但我的JavaScript真的很弱….QQ)

此外，也可以直接在Console直接去抓網頁的節點，如下圖示範去抓搜尋框的節點

結論

在前端開發時，搭配Console使用真的會幫助很大，可以即時知道自己修改的部分是否符合預期。阿本人的前端功力也要繼續加油了QQ

Reference

[學習筆記] Chrome Dev Tools 開發者工具實用功能整理

Hack 網頁從按鈕開始!HTML/CSS/JS Debug 技巧 從把妹角度理解前後端如何和平相處