璇﹁В閰嶇疆Visual Studio/Webstorm鏉ヨ皟璇旿avaScript

Posted 2021-04-17 Fundebug

璇戣€呮寜锛?/strong> 鏈枃浠嬬粛浜嗕娇鐢∟ode Inspector鏉ヨ皟璇?JavaScript鍜孴ypeScript搴旂敤銆?/p>

• 鍘熸枃: Debugging javascript/TypeScript Node apps with Chrome DevTools, VS Code and WebStorm 馃悶馃敨

• 璇戣€? Fundebug

涓轰簡淇濊瘉鍙鎬э紝鏈枃閲囩敤鎰忚瘧鑰岄潪鐩磋瘧銆傚彟澶栵紝鏈枃鐗堟潈褰掑師浣滆€呮墍鏈夛紝缈昏瘧浠呯敤浜庡涔犮€?/strong>

鎴戝噯澶囦簡涓€涓绠楁枑娉㈡媺濂戝簭鍒楃殑渚嬪瓙锛屾斁鍦℅ithub浠撳簱銆傛垜寤鸿浣犲皢瀹冨厠闅嗕笅鏉ュ苟涓旇窡鐫€鎴戞搷浣溿€傚綋鐒讹紝杩欎笉鏄繀椤荤殑銆?/p>

$ git clone https://github.com/andrerpena/medium-node-inspector-tests.git $ cd medium-node-inspector-tests $ npm i

鎴戞妸鏈枃闇€瑕佷娇鐢ㄥ埌鐨勫懡浠ら兘鍐欐垚浜嗚剼鏈€傚鏋滀綘娌℃湁鍏嬮殕浠ｇ爜锛岄偅涔堝弬鑰冧笅闈㈢殑鑴氭湰锛?br>

"scripts": {  "build:ts": "tsc",  "start": "node index.js",  "start:watch": "nodemon index.js",  "start:debug": "node --inspect index.js",  "start:debug:brk": "node --inspect-brk index.js",  "start:debug:ts": "node --inspect --require ts-node/register index.ts",  "start:debug:ts:brk": "node --inspect-brk --require ts-node/register index.ts" }

褰撲綘鐨勭幆澧冮厤缃ソ浜嗭紝浣犲彲浠ヤ娇鐢?code class="mq-48">npm start鏉ュ惎鍔ㄧ▼搴忥紝骞惰闂?code class="mq-49">localhost:3000/[n]鏉ユ煡鐪嬫枑娉㈡媺濂戝簭鍒椼€?/p>

鍥犱负鎴戞兂婕旂ずJavScript鍜孴ypeScript debugging锛屾墍鏈夋垜鍐欎簡index.ts鏂囦欢鍜屽搴旂殑JavaScript鐗堟湰鐢眛sc鍛戒护鐢熸垚銆傛墍浠ワ紝JavaScript鐗堟湰鐪嬩笂鍘讳細鏈変竴鐐逛笐銆?/p>

Debug妯″紡杩愯

鎴戜滑灏嗕細鐢ㄤ袱绉嶆ā寮忔潵debugging銆傚垎鍒娇鐢?code class="mq-55">--inspect鍜?code class="mq-56">--inspect-brk銆傚畠浠殑鍖哄埆鍦ㄤ簬锛岀浜岀鍦ㄥ儚Chrome DevTools杩欐牱鐨刟gent鎺ュ叆鍓嶏紝涓嶄細鐪熺殑鍚姩銆傚苟涓旓紝鍚姩鍚庯紝浼氳嚜鍔ㄥ湪鐢ㄦ埛鐨勭涓€琛屼唬鐮佸鏆傚仠銆?/p>

褰撲竴涓狽ode.js搴旂敤鍦╥nspect妯″紡涓嬭繍琛岋紝鏈変袱鐐硅娉ㄦ剰锛?/p>

• 涓€涓猆UID浼氬垎閰嶅埌杩欎釜debugging浼氳瘽銆傚苟涓斿悓鏃朵竴涓猈ebSockets缁堢(ws://127.0.0.1:9229/[UUID])浼氫竴鐩磋繛鎺ャ€傝缁堢浼氬皢浠ｇ爜鐨勭姸鎬佸疄鏃跺彂閫併€?/p>

• 涓€涓狧TTP缁堢(http://127.0.0.1:9229/json)浼氭彁渚涳紝渚夸簬鍍廋hrome DevTools杩欐牱鐨勭粓绔煡鏅揘ode浼氳瘽鍜岀浉搴旂殑UUID銆?/p>

浣犲彲浠?code class="mq-63">curl http://127.0.0.1:9229/json銆傛洿澶氫俊鎭鏌ョ湅: legacy-debugger銆?/p>

浣跨敤Chrome DevTools Debugging JavaScript

杩愯锛?/p>

npm start:debug // if you're on the suggested repo or... node --inspect index.js // ...otherwise.

浣犱細鐪嬪埌锛?/p>

浣犲彲浠ョ湅鍒颁竴涓猈ebSocket鏈嶅姟鍣ㄥ湪鍚姩锛屽苟涓旂洃鍚?229绔彛銆傚苟涓斿彲浠ョ湅鍒癠UID鏄?code class="mq-79">5dc97...銆傛瘡涓€涓細璇濋兘鏈夊悇鑷殑UUID銆傚鏋滀綘閲嶅惎鏈嶅姟锛孶UID浼氭敼鍙樸€?/p>

涓嬩竴姝ユ槸鎵撳紑Chrome锛屽苟鍦ㄧ綉鍧€妗嗚緭鍏hrome://inspect銆?/p>

鍦ㄨ繖閲岋紝鎴戞兂璇寸殑鏄細Chrome閫氳繃璁块棶http://127.0.0.1:9229/json鍙互鑷姩鍙戠幇姝ｅ湪杩愯鐨勪細璇濄€傜幇鍦ㄧ偣鍑讳笂鍥炬渶涓嬫柟鐨?code class="mq-84">inspect鏉ュ紑濮媎ebugging銆備竴涓柊鐨凞evTools绐楀彛浼氭墦寮€銆備綘鍙互璁块棶鎯宠debug鐨勬枃浠讹紝鍘诲姞鍏ユ柇鐐规潵deug銆?/p>

濡傛灉锛屼綘杩愯锛?/p>

npm start:debug:brk // if you're on the suggested repo or... node --inspect-brk index.js // ...otherwise.

鍙互鐪嬪埌锛?/p>

褰撲綘鍦ㄨ胺姝屾祻瑙堝櫒杈撳叆Chrome://Inspect锛屼綘浼氬彂鐜颁袱涓増鏈殑TypeScript鏂囦欢锛氫竴涓湁瀵瑰簲鐨剆ource map(鏍囪涓篬sm])锛屽彟涓€涓病鏈夈€傚綋鐒讹紝濡傛灉瑕佽皟璇曪紝鎶婃柇鐐规斁鍦ㄥ甫sm鏍囪鐨勬枃浠堕噷闈€?/p>

寮€鍙戜腑鏈夎繖涔堝宸ュ叿鍙互浣跨敤锛岄偅涔堜笂绾夸互鍚庡憿锛熻繕鑳芥剦蹇玠ebug鍚楋紵浣犲彲浠ョ殑锛屾杩庝娇鐢‵undebug锛?/p>

浣跨敤Visual Studio鏉ebugging JavaScript

閫夋嫨瑕丏ebug鐨勭洰鏍嘕avaScript鏂囦欢锛岀偣鍑籇ebug閫夐」(Mac: Shift+Cmd+D)锛岀劧鍚庣偣鍑绘墽琛屾寜閽?鈻讹笍)鍗冲彲銆俈isual Studio 浼氳嚜鍔ㄥ姞鍏nspect鍙傛暟鍚姩Node銆?/p>

濡傛灉鎯冲湪鎺у埗鍙拌繍琛岋紝浣犱篃鍙互鍒涘缓涓€涓猯aunch configuration鏂囦欢銆俈isual Studio鐨勮嚜鍔ㄨˉ鍏ㄩ潪甯告儕鑹炽€傝浣?929鏄粯璁ょ殑Node Inspector鐨勭鍙ｅ彿銆?/p>

{    "configurations": [        {            "type": "node",            "request": "attach",            "name": "Attach",            "port": 9229        }    ] }

濡傛灉浣犲浠旂粏锛屼細鍙戠幇涓婇潰鐨勯厤缃枃浠跺苟娌℃湁鍒跺畾UUID銆傚叾瀹炪€乂isual Studio浼氳嚜鍔ㄥ幓璁块棶ws://127.0.0.1:9229鏉ヨ幏鍙栧綋鍓嶄細璇濈殑鐘舵€併€傚綋浣犻厤缃ソ鍚庯紝鍙互鍦ㄦ帶鍒跺彴杩愯锛?/p>

npm start:debug // if you're on the suggested repo or... node --inspect index.js // ...otherwise.

鐒跺悗閰嶇疆launch configuraiton锛屽苟Attatch锛屾渶濂界偣鍑绘挱鏀炬寜閽€傚涓嬫墍绀猴細

浣跨敤Visual Studio鏉ebugging TypeScript

鍦╒isual Studio涓紝濡傛灉閰嶇疆浜嗏€漷ype鈥?鈥漬ode鈥濓紝鍒欎笉鍏佽浣跨敤.ts鍚庣紑鐨勬枃浠讹紝閭ｄ箞浣犺繕鏈変袱涓柟娉曪細瑕佷箞鐢╰s-node灏?ts缂栬瘧銆?br>

{    "configurations": [        {            "name": "Current TS File",            "type": "node",            "request": "launch",            "program": "${workspaceRoot}/node_modules/.bin/ts-node",            "args": ["${relativeFile}"],            "protocol": "inspector"        }    ] }

鎴栧垯灏唕untimeExecutable鎸囧畾涓篘PM锛岃€屼笉鏄粯璁ょ殑node銆?/p>

{    "configurations": [       {           "type": "node",           "request": "launch",           "name": "Launch via NPM",           "runtimeExecutable": "npm",           "runtimeArgs": [               "run-script",               "start:debug:ts"           ],           "port": 9229       },    ] }

濡傛灉浣犳兂鍦ㄦ帶鍒跺彴杩愯TypeScript锛屽涓嬶細

npm start:debug:ts // if you're on the suggested repo or... node --require ts-node/register index.ts // ...otherwise.

launch configuraiton濡備笅锛?br>

{    "configurations": [        {            "type": "node",            "request": "attach",            "name": "Attach",            "port": 9229        }    ] }

浣跨敤WebStorm鏉ebugging JavaScript

鍦ㄥ彸涓婅锛屽彲浠ラ€夋嫨Run/Debug Configurations锛岀偣鍑诲苟閫夋嫨+鍙凤紝鐒跺悗浼氬垪鍑哄緢澶氬€欓€夐厤缃€傜劧鍚庨€夋嫨Node.js锛屽苟鍛藉悕銆傚湪JavaScript file閫夐」锛屽～鍏ヤ綘鐨勫叆鍙ｆ枃浠躲€傜劧鍚庡氨鍙互杩愯鍟︺€?/p>

浣跨敤WebStorm鏉ebugging TypeScript

鍜屽鐞咼avaScript鐨勯厤缃嚑涔庝竴鏍凤紝涓嶈繃鍦∟ode Parameters閫夐」锛屼綘闇€瑕佸～鍐?code class="mq-262">--inspect --require ts-node/register銆?/p>

甯屾湜鏈枃鍙互鍔╀綘鎰夊揩(fun)debug锛?/p>