VS Code 使用火狐 FireFox 除錯網頁

2021-10-10 17:44:31 字數 1666 閱讀 8446

安裝 debugger for firefox 擴充套件

設定配置檔案(根據模式,操作有所不同)

啟動除錯

先了解一下有哪些除錯模式mode

attach:會在已存在的瀏覽器程序上附加除錯,這個程序需要手動開啟允許遠端除錯。可以除錯網路上的已有網頁。

以下參考自 debugger for firefox - visual studio marketplace 的說明,翻譯融合了一下。

一般情況

/index.html"

// 除錯工作區下的 index.html}]

}

當你的頁面要執行在 webserver 上除錯時,需要配置urlwebroot屬性,url指向乙個目錄時,必須以/結尾:

使用該模式,你需要從終端啟動乙個允許遠端除錯的 firefox 程序。你如果使用的不是開發者版本的火狐瀏覽器就必須配置好這點。

配置名設定值描述

devtools.debugger.remote-enabled

true

必須devtools.chrome.enabled

true

必須devtools.debugger.prompt-connection

false

推薦作用:關閉除錯連線時提示彈窗

devtools.debugger.force-local

false

當你需要 vs code 附加除錯到在不同的裝置上的火狐瀏覽器時,設定為false(在 attach 的配置中使用主機的屬性)

然後關閉瀏覽器,在終端執行類似以下的命令:

根據程式路徑有所不同。

"c:\program files\mozilla firefox\firefox.exe" -start-debugger-server
os x

linux

firefox -start-debugger-server
在專案裡配置好launch.json

]}

如果需要在 webserver 上測試,也要設定urlwebroot屬性,見上一小節。

因為實際上我只是想預覽一下頁面效果,沒用到那麼多東西,所以下面的就沒看了。

可能是我的火狐瀏覽器被魔改太多的原因,出現了一些異常,不能很好的除錯[笑哭.jpg]。放棄了

這個小需求不需要這麼麻煩,起初只是圖個快捷鍵方便

使用火炬之光UI

ui module function xml2010 最近忙著畢業設計,ui的地方遇到很頭大的問題,不會設計 索性今天用一天時間看了看火炬之光的ui,搗鼓了半天也終於能用 這裡要注意資源路徑和檔案的格式,另外會遇到這個錯誤 cegui invalidrequestexception in filef...

VsCode使用總結

學會看外掛程式的官方介紹,比如python外掛程式,裡面有常用的小技巧 ctrl shift p調出vscode的命令查詢介面,輸入python即可,查到python所有外掛程式的功能 vscode的設定有三種 預設設定,usersettings在這裡面的設定可以覆蓋預設設定,workspace s...

VsCode使用技巧

vscode介紹文章請移步 前端啊!你是時候換一款輕量的強大的漂亮的體驗一致的 編輯器了 visual studio code 注意 當下列快捷鍵不起作用時,請考慮是否是其他軟體已經占用了快捷鍵,如輸入法 聊天軟體等 vscode內建了emmet,使用tab鍵可快速編寫html css等,具體請查詢...