始終堅信閱讀和除錯結合的方式，才是學習開源的高效方法
一、老版本除錯
遙想當年的threejs(使用版本為r75)還沒有CommonJS，對于我這個小白可以拿起大刀大殺四方......(咳，咳， 就是拿來簡單畫個方塊啥的，，，)，使用vscode簡單配置一下就可以老老實實的拜倒在我的淫威之下，這種小秘籍已經遍地都是，說出來也不怕大家偷學去，
1 準備
vscode + debugger for chrome
2 設定
打開html所在目錄后，F5開始除錯，選擇chrome除錯器
生成launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "chrome",
"request": "launch",
"webRoot": "${workspaceFolder}",
"runtimeExecutable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
"file": "${workspaceFolder}/examples/canvas_geometry_birds.html",
"runtimeArgs":["--allow-file-access-from-files"]
}
]
}
主要設定的內容為runtimeExecutable，該引數為當前系統chrome瀏覽器的地址，file為要除錯的網頁地址；設定完成以后保存，找到要除錯的網頁，并在javascript段打上斷點，然后F5啟動除錯，小功告成，欲要神功大成，先需，，，你懂的
二、新版本除錯
由于今年開始使用匯入匯出功能，所以就需要進行版本的升級（r113），一跑代碼，我去，開不了了，原來新版本已經引入CommonJs的理念，需要在服務端運行，好吧，繼續搗鼓吧，
1 準備
vscode + debugger for chrome + nodejs
2 設定
我選擇的是使用nodejs作為服務器，nodejs+npm的安裝我就不多介紹了，小伙伴們自己找秘籍吧，如果想使用其他方法，建議參考Testing with NPM一文，
在vscode的terminal視窗進行npm的安裝操作，建議國內的還是使用cnpm，不然要等到天荒地老，
cnpm install
然后
npm run dev
然后在命令視窗中看到
[HTTP] Starting up http-server, serving ./
[HTTP] Available on:
[HTTP] http://192.168.1.144:8080
[HTTP] http://127.0.0.1:8080
[HTTP] Hit CTRL-C to stop the server
ok，現在你的本地服務已經運行起了，可以記載網頁進行除錯了，
跟老版本的除錯差不多，生成launch.json,配置引數略微除錯
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:8080/examples/#webgl_animation_cloth",
"webRoot": "${workspaceFolder}"
}
]
}
將url改成你要訪問的檔案路徑，這里面使用的是路由的方式，注意沒有.html，到你要除錯的頁面斷點開始除錯吧，祝你好運，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/147296.html
標籤：JavaScript