怎樣使用chrome調試前端html和css


修改bug的模式是什么?一個一個的修改,然后再到瀏覽器去一次又一次的刷新?

是的,以前我也是這么做的,但隨着經驗的增長,自己也感覺這樣修改的模式是煩人的、效率低下的,那有沒有一種方式是可以快速修改,所見所得,回答是有的!

chrome開發者工具為開發者提供了十分方便快捷的快速開發模式,例如,本地服務器打開網頁,按F12打開控制台------>點擊source面板,看見左側有個localhost:端口號的文件夾,在空白處點擊右鍵————————>點擊add folder to workspace ,會將你本地網站資源添加至其中,在index.html中為其添加文本映射(右鍵選項),確定后,就可以在source面板中直接編輯

你的html+css+js了,ctrl+s保存后,頁面直接改變,無需刷新,是不是很方便!快點行動吧,以下是操作步驟截圖

 

 

 

 

 

 

 

 

 

 

 

 

 

 

在空白處點擊右鍵添加

添加進來和localhost的文件夾一樣

選擇index.html點擊右鍵

添加映射關系

 

 

選擇匹配的index.html

同意點擊確定

 

完成映射,在右側編輯欄直接編輯你的代碼,保存按ctrl+s,即可保存至本地,是不是很強大,擁抱chrome吧!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM