Hướng dẫn how do i debug javascript in chrome vscode? - làm cách nào để gỡ lỗi javascript trong chrome vscode?

Ngày 23 tháng 2 năm 2016 của Andy Sterland và Kenneth Auchenberg

Kể từ lần phát hành đầu tiên của Visual Studio Code, một trong những trọng tâm của chúng tôi là đơn giản hóa quy trình làm việc hàng ngày cho các nhà phát triển bằng cách cho phép họ gỡ lỗi mã trực tiếp từ trình soạn thảo. Chúng tôi bắt đầu với việc gỡ lỗi .Net và Node.js và hôm nay chúng tôi đang thực hiện bước tiếp theo bằng cách giới thiệu trình gỡ lỗi Chrome của chúng tôi cho Visual Studio Code.

Trình gỡ lỗi Chrome của chúng tôi cho phép các nhà phát triển phía trước gỡ lỗi mã JavaScript phía máy khách của họ chạy bên trong Google Chrome trực tiếp từ Visual Studio Code.

Làm thế nào nó hoạt động?

Trình gỡ lỗi của chúng tôi hoạt động bằng cách kết nối với Chrome qua giao thức trình gỡ lỗi Chrome của nó, nơi chúng tôi ánh xạ các tệp được tải trong trình duyệt với các tệp mở trong mã Visual Studio. Điều này có nghĩa là các nhà phát triển hiện có thể đặt các điểm dừng trực tiếp trong mã nguồn của họ, thiết lập các biến để xem và xem ngăn xếp cuộc gọi đầy đủ khi gỡ lỗi - tất cả mà không cần rời khỏi trình chỉnh sửa.

Trong ví dụ trên, chúng tôi đang hiển thị một ứng dụng AngularJS được gói và thu nhỏ thông qua trình duyệt được gỡ lỗi từ mã VS. Điều này hoạt động bởi vì trình gỡ lỗi của chúng tôi hiểu các bản đồ nguồn JavaScript, mà chúng tôi sẽ sử dụng để cho phép các nhà phát triển gỡ lỗi trực tiếp từ nguồn ban đầu của họ, và không phải là kết quả được truyền mà trình duyệt nhìn thấy. Hỗ trợ bản đồ nguồn cũng cho phép gỡ lỗi bản thảo trực tiếp từ mã VS.

Hiện tại, Chrome cần phải được bắt đầu với việc gỡ lỗi từ xa được bật và chỉ hỗ trợ một kết nối đồng thời. Điều này có nghĩa là nếu bạn mở devtools bên trong Chrome, kết nối với mã VS sẽ bị chrome chấm dứt. Điều này hơi khó chịu, và chúng tôi hy vọng vấn đề này sẽ sớm được khắc phục.

Để bắt đầu

Để bắt đầu, hãy mở chế độ xem phần mở rộng (⇧⌘x (Windows, Linux Ctrl+Shift+X)). Khi danh sách mở rộng xuất hiện, nhập 'Chrome' để lọc danh sách và cài đặt tiện ích mở rộng Debugger for Chrome. Sau đó, bạn sẽ tạo một tệp cấu hình khởi chạy mà chúng tôi giải thích chi tiết trong ReadMe của chúng tôi ngay tại đây.Extensions view (⇧⌘X (Windows, Linux Ctrl+Shift+X)). When the extension list appears, type 'chrome' to filter the list and install the Debugger for Chrome extension. You'll then create a launch-configuration file which we explain in detail in our README right here.

Bạn có thể thiết lập mã vs để kết nối với một phiên bản Chrome đã chạy hoặc chỉ cần bắt đầu một phiên bản mới với lỗi gỡ lỗi từ xa được bật, nhưng hãy đọc thêm về điều đó trong ReadMe của chúng tôi.

Các tính năng được hỗ trợ

Trong bản phát hành đầu tiên này, chúng tôi hỗ trợ các tính năng sau:

• Đặt điểm dừng, bao gồm trong các tệp nguồn khi bản đồ nguồn được bật
• TypeScript, thông qua bản đồ nguồn
• Bước, bao gồm cả việc sử dụng các nút trên trang Chrome
• Các biến phạm vi của người dân địa phương thông qua khung Code locals VS
• Gỡ lỗi các tập lệnh eval, thẻ tập lệnh và tập lệnh được thêm vào động
• Đồng hồ thông qua bảng đồng hồ VS Code.
• Bảng điều khiển gỡ lỗi
• Hầu hết các API console

Đi về phía trước

Chúng tôi tin rằng có rất nhiều việc phải làm cho các nhà phát triển phía trước, vì việc xây dựng cho Web trong những năm gần đây đã trở nên vô cùng phức tạp. Với trình gỡ lỗi Chrome của chúng tôi, chúng tôi đang thực hiện bước đầu tiên hướng tới quy trình phát triển web đơn giản hơn, trong đó các trình duyệt và dụng cụ từ các nhà cung cấp khác nhau có thể làm việc cùng nhau và xây dựng cho Web cảm thấy tích hợp hơn.

Chúng tôi đã phát hành tiện ích mở rộng này trên GitHub như một dự án nguồn mở được cấp phép MIT. Đó là một công việc đang tiến triển, vì vậy hãy xem trang vấn đề của chúng tôi về các lỗi đã biết - ví dụ, chúng tôi có một vài vấn đề xung quanh việc hỗ trợ tất cả các hương vị của bản đồ nguồn được tạo.

Hiện tại, chúng tôi hỗ trợ Google Chrome, nhưng chúng tôi cũng đang xem xét việc mở rộng hỗ trợ cho Microsoft Edge và các trình duyệt khác. Chúng tôi thực sự muốn phản hồi của bạn và giúp xây dựng trải nghiệm gỡ lỗi thậm chí còn tốt hơn.

Nếu bạn có bất kỳ vấn đề hoặc ý tưởng để cải tiến, hãy liên hệ với chúng tôi trên Twitter hoặc GitHub.

-

Andy Sterland, Giám đốc chương trình cao cấp, Chẩn đoán JavaScript Kenneth Auchenberg, Giám đốc chương trình, Chẩn đoán JavaScript
Kenneth Auchenberg, Program Manager, JavaScript Diagnostics

Trình duyệt gỡ lỗi trong mã VS

Visual Studio Code bao gồm một trình gỡ lỗi tích hợp cho Edge và Chrome. Có một vài cách để bắt đầu với nó.

• Sử dụng lệnh liên kết mở để gỡ lỗi URL.
• Nhấp vào một liên kết trong thiết bị đầu cuối gỡ lỗi JavaScript.
• Sử dụng cấu hình khởi chạy để khởi chạy trình duyệt với ứng dụng của bạn.

Chúng tôi cũng có những hướng dẫn chi tiết hơn để bắt đầu với React, Angular, Vue và Ember, cũng như các công thức gỡ lỗi khác.

Mở lệnh liên kết

Cách đơn giản nhất để gỡ lỗi một trang web là thông qua lệnh gỡ lỗi: mở liên kết mở được tìm thấy trong bảng lệnh (⇧⌘p (windows, linux ctrl+shift+p)). Khi bạn chạy lệnh này, bạn sẽ được nhắc cho một URL mở và trình gỡ lỗi sẽ được đính kèm.Debug: Open Link command found in the Command Palette (⇧⌘P (Windows, Linux Ctrl+Shift+P)). When you run this command, you'll be prompted for a URL to open, and the debugger will be attached.

Nếu trình duyệt mặc định của bạn là cạnh, mã VS sẽ sử dụng nó để mở trang. Nếu không, nó sẽ cố gắng tìm một bản cài đặt Chrome trên hệ thống của bạn.

Khởi chạy cấu hình

Các cấu hình khởi chạy là cách truyền thống để thiết lập gỡ lỗi trong mã VS và cung cấp cho bạn sự linh hoạt nhất để chạy các ứng dụng phức tạp.

Trong phần này, chúng tôi sẽ đi sâu vào chi tiết hơn về các cấu hình và tính năng cho các kịch bản gỡ lỗi nâng cao hơn. Hướng dẫn cho Node.js gỡ lỗi với bản đồ nguồn và bước qua mã bên ngoài cũng áp dụng cho gỡ lỗi dựa trên trình duyệt.

Lưu ý: Nếu bạn mới bắt đầu với mã VS, bạn có thể tìm hiểu về các tính năng gỡ lỗi chung và tạo các tệp cấu hình launch.json trong chủ đề gỡ lỗi.: If you are just getting started with VS Code, you can learn about general debugging features and creating launch.json configuration files in the Debugging topic.

Khởi chạy trình duyệt

Trong hầu hết các trường hợp, bạn sẽ muốn bắt đầu một phiên bản mới của trình duyệt để gỡ lỗi trang web hoặc tệp của mình. Để làm điều này, bạn có thể tạo một tệp có tên .vscode/launch.json trông như thế này:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch my cool app",
      "url": "http://localhost:8000"
    }
  ]
}

Khi bạn nhấn F5 hoặc nút bắt đầu trong chế độ xem chạy và gỡ lỗi, http://localhost:8000 sẽ được mở ở chế độ gỡ lỗi. Nếu bạn muốn sử dụng Chrome thay vì cạnh, hãy thay thế msedge bằng chrome.F5 or the Start button in the Run and Debug view, http://localhost:8000 will be opened in debug mode. If you'd like to use Chrome instead of Edge, replace msedge with chrome.

Bạn cũng có thể gỡ lỗi một tệp mà không cần chạy máy chủ, ví dụ:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch hello.html",
      "file": "${workspaceFolder}/hello.html"
    }
  ]
}

Gắn vào trình duyệt

Để gắn vào trình duyệt đang chạy, nó cần được ra mắt trong chế độ gỡ lỗi đặc biệt. Bạn có thể thực hiện việc này bằng cách sử dụng lệnh sau, thay thế

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch hello.html",
      "file": "${workspaceFolder}/hello.html"
    }
  ]
}

edge.exe --remote-debugging-port=9222 --user-data-dir=remote-debug-profile

Đặt

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch hello.html",
      "file": "${workspaceFolder}/hello.html"
    }
  ]
}

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch hello.html",
      "file": "${workspaceFolder}/hello.html"
    }
  ]
}

Tiếp theo, thêm một phần mới vào tệp

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch hello.html",
      "file": "${workspaceFolder}/hello.html"
    }
  ]
}

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "attach",
      "name": "Attach to browser",
      "port": 9222
    }
  ]
}

Bây giờ, bạn có thể nhấn F5 hoặc nút Bắt đầu trong chế độ xem chạy và gỡ lỗi để gắn vào trình duyệt đang chạy. Bạn thậm chí có thể thêm thuộc tính

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch hello.html",
      "file": "${workspaceFolder}/hello.html"
    }
  ]
}

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch hello.html",
      "file": "${workspaceFolder}/hello.html"
    }
  ]
}

Khởi chạy các thuộc tính cấu hình

Các cấu hình gỡ lỗi được lưu trữ trong tệp launch.json nằm trong thư mục

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch hello.html",
      "file": "${workspaceFolder}/hello.html"
    }
  ]
}

Dưới đây là một tài liệu tham khảo của các thuộc tính launch.json phổ biến cụ thể cho gỡ lỗi trình duyệt. Bạn có thể xem tập hợp hoàn chỉnh các tùy chọn trong tài liệu Tùy chọn VSCode-JS-Debug.

• {
    "version": "0.2.0",
    "configurations": [
      {
        "type": "msedge",
        "request": "launch",
        "name": "Launch hello.html",
        "file": "${workspaceFolder}/hello.html"
      }
    ]
  }
  

  8 - Thư mục gốc cho mã nguồn của bạn. Thông thường nhất và theo mặc định,

  {
    "version": "0.2.0",
    "configurations": [
      {
        "type": "msedge",
        "request": "launch",
        "name": "Launch hello.html",
        "file": "${workspaceFolder}/hello.html"
      }
    ]
  }
  

  8 là thư mục không gian làm việc của bạn. Tùy chọn này được sử dụng để giải quyết Sourcemap.

• edge.exe --remote-debugging-port=9222 --user-data-dir=remote-debug-profile
  

  0 - Một mảng các mẫu GLOB để định vị các tệp JavaScript được tạo. Xem phần trên bản đồ nguồn.
• ________ 21- Cố gắng tự động bước qua mã nguồn không ánh xạ tới các tệp nguồn. Xem phần về bước thông minh.

• edge.exe --remote-debugging-port=9222 --user-data-dir=remote-debug-profile
  

  2 - Tự động bỏ qua các tệp được bao phủ bởi các mẫu GLOB này. Xem phần về bỏ qua mã không thú vị.

• edge.exe --remote-debugging-port=9222 --user-data-dir=remote-debug-profile
  

  3 - Kích hoạt đầu ra chẩn đoán.

Các thuộc tính này chỉ có sẵn cho các cấu hình khởi chạy của loại yêu cầu

edge.exe --remote-debugging-port=9222 --user-data-dir=remote-debug-profile

• edge.exe --remote-debugging-port=9222 --user-data-dir=remote-debug-profile
  

  5 - URL để tự động mở khi trình duyệt được khởi chạy.

• edge.exe --remote-debugging-port=9222 --user-data-dir=remote-debug-profile
  

  6 - Một đường dẫn tuyệt đối đến trình duyệt có thể sử dụng hoặc phiên bản của trình duyệt để sử dụng. Các phiên bản hợp lệ bao gồm

  edge.exe --remote-debugging-port=9222 --user-data-dir=remote-debug-profile
  

  7 (mặc định),

  edge.exe --remote-debugging-port=9222 --user-data-dir=remote-debug-profile
  

  8,

  edge.exe --remote-debugging-port=9222 --user-data-dir=remote-debug-profile
  

  9 và

  {
    "version": "0.2.0",
    "configurations": [
      {
        "type": "msedge",
        "request": "attach",
        "name": "Attach to browser",
        "port": 9222
      }
    ]
  }
  

  0.

• {
    "version": "0.2.0",
    "configurations": [
      {
        "type": "msedge",
        "request": "attach",
        "name": "Attach to browser",
        "port": 9222
      }
    ]
  }
  

  1 - Các đối số tùy chọn được truyền khi khởi chạy trình duyệt.

Các thuộc tính này chỉ có sẵn cho các cấu hình khởi chạy của loại yêu cầu

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "attach",
      "name": "Attach to browser",
      "port": 9222
    }
  ]
}

• edge.exe --remote-debugging-port=9222 --user-data-dir=remote-debug-profile
  

  5 - Nếu được cung cấp, mã VS sẽ đính kèm vào một tab với url này. Nếu không được cung cấp, nó sẽ gắn vào tất cả các tab Trình duyệt.

• {
    "version": "0.2.0",
    "configurations": [
      {
        "type": "msedge",
        "request": "attach",
        "name": "Attach to browser",
        "port": 9222
      }
    ]
  }
  

  4 - Cổng gỡ lỗi để sử dụng. Xem phần trên đính kèm vào Node.js.

• {
    "version": "0.2.0",
    "configurations": [
      {
        "type": "msedge",
        "request": "attach",
        "name": "Attach to browser",
        "port": 9222
      }
    ]
  }
  

  5 - Địa chỉ TCP/IP của cổng gỡ lỗi. Xem phần về gắn vào trình duyệt.

Bước tiếp theo

• Gỡ lỗi - Đọc về các tính năng gỡ lỗi mã chung và mã.
• Bí quyết gỡ lỗi - Thiết lập gỡ lỗi cho nền tảng yêu thích của bạn.

10/6/2022

Làm cách nào để chạy trình gỡ lỗi JavaScript trong Chrome?

Làm cách nào để kích hoạt gỡ lỗi JavaScript trong Visual Studio Code?

Làm cách nào để gỡ lỗi JavaScript trong Visual Studio?