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 技巧 從把妹角度理解前後端如何和平相處

#GoogleChrome #開發者工具 #Console






你可能感興趣的文章

使用 Gazebo 模擬器控制機器人建立 2D 地圖

使用 Gazebo 模擬器控制機器人建立 2D 地圖

 JS 學習筆記 : Set & Filter

JS 學習筆記 : Set & Filter

[Power BI] 讀書會 #4 Analysis Services 概念(3)

[Power BI] 讀書會 #4 Analysis Services 概念(3)






留言討論