如何通過(guò)vscode運(yùn)行調(diào)試javascript代碼
初次正式要寫(xiě) javascript 相關(guān)的代碼,想要用 vscode 直接編譯 js 代碼,但是發(fā)現(xiàn)沒(méi)有那么簡(jiǎn)單,需要配置好 launch.json 文件,現(xiàn)已經(jīng)在vscode上編譯過(guò)去并且可以調(diào)試 javascript 代碼,總結(jié)了兩種方法,分享給大家.
方法一: 在 js 后綴文件中寫(xiě) javascript 代碼.
1. 環(huán)境配置:
(1). 需要安裝 nodejs (在Bing搜索中輸入 nodejs, 找到nodejs官網(wǎng),然后找到適合你電腦配置的安裝包進(jìn)行下載安裝,最后要輸入 node -v 和 npm -v 檢驗(yàn)是否安裝成功)
(2). 可以安裝 vscode 擴(kuò)展包: Code Runner
2. 新建一個(gè) js 后綴的文件,如 hello_world.js ,輸入以下內(nèi)容:
var a = 1; var b = 2; console.log("hello world"); console.log("a = ", a); console.log("b = ", b);
3. 運(yùn)行程序
(1) 如果你安裝了 Code Runer,那么就可以直接點(diǎn)擊右鍵選擇 Run Code 運(yùn)行代碼,就可以在 OUTPUT 窗口上看到運(yùn)行結(jié)果
(2) 在 vscode 的 TERMINAL 終端輸入: node hello_world.js 也可以看到 運(yùn)行結(jié)果
(3) 想要按下 F5 進(jìn)行運(yùn)行并且調(diào)試,那么就要配置好 launch.json 文件. 先點(diǎn)擊 Run -> Open Configurations, 輸入以下內(nèi)容
{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [{ "name": "Launch", "type": "node", "request": "launch", "program": "${workspaceRoot}/hello_world.js", }, ] }
注意這里的第 11 行的文件名稱(chēng)要改成你自己定義的文件名稱(chēng),其中的workspaceRoot 表示當(dāng)前文件路徑.
再按下 F5 的時(shí)候,記得配置文件一定要選擇名為 Launch (和上面的name同名) 的那個(gè)配置文件運(yùn)行,配置了 launch.json 文件,你還可以在 js 文件中打上斷點(diǎn)進(jìn)行調(diào)試.如下圖所示
方法二: 在 html 后綴文件中寫(xiě) javascript 代碼.
1. 環(huán)境配置:
(1) 安裝 chrome 瀏覽器(做前端開(kāi)發(fā)這是通用瀏覽器)
(2) 安裝 vscode 擴(kuò)展包: Debugger for chrome 和 open in browser
(3) File -> Preferences -> Settings, 輸入 breakpoints,找到 Debug: Allow Breakpoints Everywhere,勾上允許在任何文件設(shè)置斷點(diǎn)(這樣才可以在html文件中設(shè)置斷點(diǎn))
2. 新建一個(gè) html 后綴的文件,如 a.html ,輸入以下內(nèi)容:
<!DOCTYPE html> <html> <head> <script> function myFunction() { console.log("hello world"); document.getElementById("demo").innerHTML="My First JavaScript Function"; alert("this is a place where can write code."); } </script> </head> <body> <h1>My Web Page</h1> <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()">Try it</button> </body> </html>
3. 運(yùn)行程序
(1) 按下 F5 運(yùn)行并且調(diào)試代碼,這里主要涉及到 launch.json 文件的配置,先點(diǎn)擊 Run -> Open Configurations, 輸入以下內(nèi)容
{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}" }, { "type": "chrome", "request": "launch", "name": "使用本地chrome調(diào)試", "file": "${file}", "port":8000, } ] }
然后在 script 的代碼部分打上斷點(diǎn),按下 F5 , 點(diǎn)擊 Try it 按鈕,你可以看到中間結(jié)果了,如下圖所示
(2) 鼠標(biāo)右鍵點(diǎn)擊 Open in Other Browsers, 選擇其中 一個(gè)瀏覽器就可以看到結(jié)果,再點(diǎn)擊按鈕出現(xiàn)的網(wǎng)頁(yè)中的 Try it 按鍵,就可以調(diào)用 script 中 js 的代碼的結(jié)果. 這里,你也可以在vscode中設(shè)置你的默認(rèn)瀏覽器,那么你就可以選擇Open in Default Browers, 在默認(rèn)的瀏覽器中打開(kāi), 或者按下快捷鍵 Alt + B 查看結(jié)果. (這種方法不能調(diào)試,并且這種方法只能在配置好launch.json后再按下F5之后才可以使用)
(備注: vscode 默認(rèn)瀏覽器的設(shè)置, File -> Preferences -> Settings, 輸入 default browser , 找到 Open-in-browser : Default , 我這里是輸入了 : Google Chrome )
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS動(dòng)態(tài)圖片的實(shí)現(xiàn)方法完整示例
這篇文章主要介紹了JS動(dòng)態(tài)圖片的實(shí)現(xiàn)方法,結(jié)合完整實(shí)例形式分析了JavaScript鼠標(biāo)響應(yīng)與頁(yè)面元素屬性動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2020-01-01JavaScript 語(yǔ)言基礎(chǔ)知識(shí)點(diǎn)總結(jié)(思維導(dǎo)圖)
這篇文章通過(guò)思維導(dǎo)圖格式總結(jié)了JavaScript 語(yǔ)言基礎(chǔ)知識(shí)點(diǎn),想要學(xué)習(xí)js的朋友可以參考下2013-11-11JavaScript實(shí)現(xiàn)同時(shí)調(diào)用多個(gè)函數(shù)的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)同時(shí)調(diào)用多個(gè)函數(shù)的方法,以一個(gè)簡(jiǎn)單實(shí)例分析了JavaScript同時(shí)調(diào)用兩個(gè)函數(shù)的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11JS實(shí)現(xiàn)websocket長(zhǎng)輪詢(xún)實(shí)時(shí)消息提示的效果
這篇文章主要介紹了JS實(shí)現(xiàn)websocket長(zhǎng)輪詢(xún)實(shí)時(shí)消息提示的效果的相關(guān)資料,需要的朋友可以參考下2017-10-10基于Echarts 3.19 制作常用的圖形(非靜態(tài))
這篇文章主要介紹了基于Echarts 3.19 制作常用的圖形(非靜態(tài))的相關(guān)資料,需要的朋友可以參考下2016-05-05js實(shí)現(xiàn)Select下拉框具有輸入功能的方法
這篇文章主要介紹了js實(shí)現(xiàn)Select下拉框具有輸入功能的方法,實(shí)例分析了兩種比較常見(jiàn)的實(shí)現(xiàn)方法,是非常實(shí)用的技巧,需要的朋友可以參考下2015-02-02JavaScript遞歸操作樹(shù)形結(jié)構(gòu)代碼示例
前端樹(shù)形結(jié)構(gòu)一般用于網(wǎng)頁(yè)的地理位置輸入框,地理位置級(jí)聯(lián)選擇,人員的部門(mén)選擇等,這篇文章主要給大家介紹了關(guān)于JavaScript遞歸操作樹(shù)形結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下2024-01-01layui 實(shí)現(xiàn)加載動(dòng)畫(huà)以及非真實(shí)加載進(jìn)度的方法
今天小編就為大家分享一篇layui 實(shí)現(xiàn)加載動(dòng)畫(huà)以及非真實(shí)加載進(jìn)度的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09