Làm cách nào để gỡ lỗi HTML và JavaScript cùng nhau trong VSCode (Mã Visual Studio)?

Question

Tôi có một dự án thực sự đơn giản trong VSCode, một tệp index.html liên kết đến một tệp app.js duy nhất.

Tôi muốn chạy và gỡ lỗi trang web nhỏ này khi tôi nhấn F5.

Làm cách nào để định cấu hình VSCode để mở index.html trong trình duyệt và sau đó cho phép tôi đặt điểm ngắt trong app.js sẽ được kích hoạt bởi tương tác của tôi với ứng dụng trong trình duyệt?

Trong Visual Studio, điều này sẽ "hoạt động", vì nó kích hoạt máy chủ web của riêng nó, IIS Express. Trong VSCode, tôi không chắc chắn cách tôi thiết lập launch.json và/hoặc tasks.json để tạo một máy chủ web node.js đơn giản và phục vụ index.html.

Tôi đã thấy một số ví dụ về ứng dụng gỡ lỗi javascript, ví dụ launch.json này:

{ 
    "version": "0.1.0", 
    "configurations": [ 
     { 
      "name": "Launch Bjarte's app", 
      "type": "node", 
      "program": "app.js", 
      "stopOnEntry": true, 
      "args": [], 
      "cwd": ".", 
      "runtimeExecutable": null, 
      "runtimeArguments": [], 
      "env": {}, 
      "sourceMaps": false 
     }, 
     { 
      "name": "Attach", 
      "type": "node", 
      "address": "localhost", 
      "port": 5858, 
      "sourceMaps": false 
     } 
    ] 
} 

này sẽ chạy file js, nhưng tôi không hiểu làm thế nào tôi có thể tương tác với các ứng dụng.

Answer 1

Giờ đây, bạn có thể gỡ lỗi các trang web Chrome trong vscode thông qua gỡ lỗi từ xa Chrome với tiện ích mở rộng do Microsoft phát hành. Debugger for Chrome

Như bạn có thể thấy từ trang đó có hai chế độ gỡ lỗi, Khởi chạy và Đính kèm. Tôi chỉ quản lý để sử dụng chế độ đính kèm, có lẽ bởi vì tôi không có một máy chủ đang chạy. Tiện ích mở rộng này có tất cả các công cụ gỡ lỗi quan trọng chức năng: biến cục bộ, điểm ngắt, bảng điều khiển, ngăn xếp cuộc gọi.

Lý do khác để xem lại vscode là giờ đây nó có hỗ trợ IntelliSense cho ECMAScript 6, hiển thị các phương thức không hiển thị trong các giải pháp "IntelliSense like" khác mà tôi đã thử, như SublimeCodeIntel hoặc phiên bản mới nhất của WebStorm.

Answer 2

VSCode sẽ sử dụng nút để khởi chạy ứng dụng của bạn, có nghĩa là ứng dụng của bạn đang chạy trên một số PORT. Bạn có thể tương tác với ứng dụng của mình bằng cách truy cập http://localhost:PORT/ Nếu bạn đặt điểm ngắt trong app.js, nó sẽ bị nhấn khi bạn truy cập trang web đang chạy cục bộ qua nút. Đây là một bản demo đẹp https://channel9.msdn.com/Blogs/cloud-with-a-silver-lining/hello-visual-studio-code-nodejs

Answer 3

Có vẻ như những gì tôi muốn làm là không thể trong VSCode (chưa?). Giải pháp của tôi vào lúc này, là sử dụng gói nút live-server. Cài đặt với

> npm install -g live-server 

Sau đó, mở VSCode, nhấp chuột phải vào bất kỳ tệp nào trong thư mục gốc của dự án và chọn "Mở trong bảng điều khiển". Sau đó, nhập

> live-server 

để khởi động máy chủ với dự án làm thư mục gốc. Live-server sẽ mở trình duyệt mặc định của bạn và cũng giám sát thư mục dự án của bạn để thay đổi bất kỳ tệp nào và tải lại trang html mỗi khi bạn thực hiện bất kỳ thay đổi nào.

Tôi nên đề cập giải pháp của mình bằng cách sử dụng live-server không cho phép tôi gỡ lỗi ứng dụng của mình trong VSCode, chỉ chạy nó trong trình duyệt. Tôi đang gỡ lỗi trong Chrome.

Answer 4

Bạn có thể sử dụng https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Trong sự ra mắt.json bạn chỉ cần có pu giá trị url của máy chủ mà bạn đang sử dụng và sau đó bạn có thể gỡ lỗi html + js của bạn với mã biên tập hình ảnh trực quan của bạn

{ 
    "version": "0.2.0", 
    "configurations": [ 
     { 
      "type": "chrome", 
      "request": "launch", 
      "name": "Launch Chrome against localhost", 
      "url": "http://127.0.0.1:8081", 
      "webRoot": "${workspaceFolder}" 
     } 
    ] 
}