Trình gỡ lỗi JavaScript không hoạt động trong Visual Studio 2022

Nếu bạn đang gỡ lỗi JavaScript trong Visual Studio Code thì có thể bạn đã sử dụng Trình gỡ lỗi Chrome hoặc tiện ích mở rộng Trình gỡ lỗi Microsoft Edge. Không cần thiết phải gỡ lỗi nữa vì tính năng gỡ lỗi JavaScript hiện đã được tích hợp sẵn trong Visual Studio Code. Điều này không chỉ có nghĩa là bạn có thể gỡ cài đặt các tiện ích mở rộng này mà chúng tôi còn giúp việc gỡ lỗi trở nên thuận tiện hơn

Để gỡ lỗi bất kỳ dự án nào trong Chrome hoặc Microsoft Edge, tất cả những gì bạn cần làm là bắt đầu một phiên bằng cách nhấn F5 hoặc kích hoạt biểu tượng gỡ lỗi trong thanh menu và chọn “Chạy và gỡ lỗi”. Ngoài ra, bạn cũng có thể sử dụng bảng lệnh Visual Studio Code và chạy chương trình “Gỡ lỗi. Lệnh mở liên kết. Từ đó, bạn có thể chọn gỡ lỗi trong Chrome, Edge hoặc Node. js mà không cần phải cài đặt bất kỳ tiện ích mở rộng nào

Nếu bạn chọn Edge, bạn sẽ nhận thấy một tính năng bổ sung trong thanh công cụ gỡ lỗi. một nút kiểm tra

Nút này khởi chạy Công cụ dành cho nhà phát triển Edge ngay bên trong phiên bản Visual Studio Code của bạn. Lần đầu tiên bạn kích hoạt nút này, trình chỉnh sửa sẽ yêu cầu bạn cài đặt tiện ích mở rộng Microsoft Edge DevTools cho Visual Studio Code. Khi bạn đã cài đặt cái này, bạn sẽ không được nhắc lại

Sau đó, bạn có thể kiểm tra DOM, thay đổi CSS và xem các yêu cầu mạng của dự án đang chạy trong trình duyệt mà không cần rời khỏi Visual Studio Code

Ngoài ra, bạn cũng có thể sử dụng Bảng điều khiển gỡ lỗi trong trình chỉnh sửa để tương tác với tài liệu trong trình duyệt, giống như cách bạn làm với Bảng điều khiển trong các công cụ dành cho nhà phát triển trình duyệt. Bạn có toàn quyền truy cập vào đối tượng cửa sổ và có thể sử dụng Console Utilities API

Nếu bạn muốn tự động đính kèm vào Microsoft Edge và khởi chạy Công cụ dành cho nhà phát triển trong trình chỉnh sửa, bạn có thể tạo một khởi chạy. tập tin json. Lưu ý rằng `https. //máy chủ cục bộ. 8080` có lẽ cần được thay đổi cho dự án của bạn

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-msedge",
      "request": "launch",
      "name": "Launch Microsoft Edge and open the Edge DevTools",
      "url": "//localhost:8080",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

Nếu bạn muốn tìm hiểu sâu về các tính năng của quy trình gỡ lỗi JavaScript tích hợp của Visual Studio Code, bạn có thể kiểm tra tệp README của tiện ích mở rộng trình gỡ lỗi

Chúng tôi hy vọng rằng bằng cách tự động đưa tùy chọn gỡ lỗi bằng trình duyệt vào Visual Studio Code, chúng tôi đã làm cho quy trình bắt đầu dễ dàng hơn và rất muốn tìm hiểu xem chúng tôi có thể làm gì khác để giúp bạn hiệu quả hơn trong hành trình gỡ lỗi của mình. Gửi phản hồi [Alt-Shift-I với DevTools đang mở] hoặc liên hệ với nhóm trên Twitter để cho chúng tôi biết suy nghĩ của bạn

nút là gì. js?

Nút. js là môi trường thời gian chạy JavaScript cho phép bạn chạy mã JavaScript bên ngoài trình duyệt. Nó không phải là một khung mà là một công nghệ được xây dựng trên công cụ JavaScript V8 của Chrome, cho phép sử dụng nó để phát triển các ứng dụng phía máy chủ và các công cụ dòng lệnh. Nó cũng phổ biến trên Internet of Things [IoT]. Nút. js có một cộng đồng lớn các nhà phát triển đã tạo ra nhiều mô-đun mà bạn có thể sử dụng trong các dự án của riêng mình.

Nút. ứng dụng js là các ứng dụng được viết bằng JavaScript được thực thi trên máy chủ bằng Nút. môi trường thời gian chạy js. Các ứng dụng này thường được xây dựng trên các khung và thư viện JavaScript phổ biến như Express, React, Angular và Vue

Các tính năng chính của Nút. js là

• Nó là một môi trường thời gian chạy JavaScript phía máy chủ mã nguồn mở
• Nút. js là môi trường thời gian chạy đa nền tảng cho phép bạn chạy mã JavaScript ở phía máy chủ
• Các ứng dụng được viết bằng JavaScript và có thể chạy trong Node. js trên OS X, Microsoft Windows và Linux
• Các ứng dụng là đơn luồng, nghĩa là một quy trình có thể xử lý đồng thời nhiều yêu cầu
• Nó không đồng bộ, nghĩa là nó có thể xử lý đồng thời nhiều yêu cầu mà không cần đợi từng yêu cầu kết thúc trước khi bắt đầu yêu cầu tiếp theo
• Nó sử dụng mô hình I/O không chặn, hướng sự kiện giúp nó nhẹ và hiệu quả
• Nó có sẵn theo giấy phép MIT

Mặc dù tất cả những điều trên đều tuyệt vời nhưng vẫn có lỗi khi có mã. Gỡ lỗi trở thành nhiệm vụ chung của mọi nhà phát triển dưới dạng tác dụng phụ.

Hướng dẫn từng bước gỡ lỗi Node. js trong VSCode

điều kiện tiên quyết

Trước khi chúng tôi bắt đầu hướng dẫn này, chúng tôi sẽ giả định như sau

• bạn có Nút. js đã cài đặt,
• bạn có VSCode

Đối với hướng dẫn này, chúng ta sẽ thiết lập một Node đơn giản. chương trình js có lỗi trong đó

Sau đó, chúng tôi sẽ thực hiện theo quy trình gỡ lỗi sẽ cung cấp cho bạn phạm vi cơ bản về cách sử dụng công cụ gỡ lỗi trong VSCode cho Node. js

Để tạo chương trình đơn giản của chúng ta, hãy chạy npm init  bên trong thư mục dự án trống trong bảng điều khiển của bạn. Điều này sẽ cung cấp cho chúng tôi gói. tệp json.

Trong cùng thư mục, hãy tạo ứng dụng. js với mã sau.

const calculate = [A, B] => {
  console.log['Adding...']
  let sum = 0
 
  sum = A + B + B + A
  return sum
 }
 ​
 const num1 = 1
 const num2 = 1
 ​
 const result = calculate[num1, num2]
 console.log[num1 + ' plus ' + num2 + ' = ' + result]

Chúng tôi biết điều này là không chính xác. Có một lỗi cố ý được giới thiệu trong biến tổng. Nếu chúng ta chạy chương trình bằng nút lệnh app. js, chúng tôi sẽ nhận được đầu ra sau

 Adding...
 1 plus 1 = 4.

Sử dụng công cụ gỡ lỗi VSCode

VSCode đi kèm với một công cụ gỡ lỗi sẵn có mà các nhà phát triển có thể sử dụng để gỡ lỗi Node. ứng dụng js. Công cụ này nằm ở bảng điều khiển bên trái và trông như thế này

Ngoài ra, bạn cũng có thể sử dụng từ khóa Ctrl + Shift + D to switch to the debugging panel.

Tiếp theo, nhấp vào ‘ tạo và khởi chạy. json ‘ và chọn nút. js.

Bạn sẽ thấy một cấu hình giống như thế này

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: //go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "/**"
            ],
            "program": "${workspaceFolder}\\src\\app.js"
        }
    ]
 }

Đôi khi, tùy thuộc vào phiên bản hoặc thiết lập thư mục tệp của bạn, giá trị được gán cho chương trình có thể không khớp với tệp chính của mục nhập cho ứng dụng của bạn. Đối với tình huống cụ thể đó, bạn chỉ cần thay đổi nó thành bất kỳ tệp mục nhập chính nào của bạn - thường là một cái gì đó giống như ứng dụng. js hoặc chỉ mục. js

Bạn cũng có thể định cấu hình trình gỡ lỗi để bỏ qua một số tệp được liệt kê trong mảng skipFile.

Khi bạn đã hoàn thành việc này, bạn có thể lưu và thoát khỏi tệp. Thao tác này sẽ thay đổi giao diện của bảng điều khiển bên gỡ lỗi của bạn. Đây là ảnh chụp màn hình được cập nhật

Khi bạn bấm vào nút play bên cạnh để chạy, nó sẽ khởi chạy và chạy chương trình thông qua trình gỡ lỗi. Bảng điều khiển trình gỡ lỗi sẽ chạy và thoát với Quá trình đã thoát với mã 0, có nghĩa là mọi thứ hoạt động như mong đợi

Quá trình gỡ lỗi một nút. ứng dụng js

Để gỡ lỗi ứng dụng của bạn. js, bạn có thể đặt điểm ngắt bằng cách nhấp vào dấu chấm màu đỏ khi di chuột qua số dòng mà bạn muốn đặt. điểm dừng là nơi trình gỡ lỗi VSCode cố ý dừng hoặc tạm dừng quá trình thực thi chương trình để bạn có thể kiểm tra các thay đổi trạng thái trong các biến và xem và gọi bảng ngăn xếp .

Bây giờ, khi bạn chạy lại chương trình, nó sẽ tiếp tục đi xuống mã và dừng lại ở nơi bạn đã đặt dấu chấm đỏ. Nhìn qua bảng biến sẽ đăng xuất trạng thái hiện tại của các giá trị được gán. Chỉ cần nhấp chuột phải vào chấm đỏ và chọn “remove breakpoint” để xóa breakpoint

Ở đây, biến A và B của chúng ta đã được set giá trị, riêng biến result chưa được định nghĩa vì nó chưa được định nghĩa trong chương trình – nghĩa là nó chưa tồn tại

Bảng điều khiển VARIABLE xuất ra tất cả các biến hiện tại và trạng thái của chúng.

Trong khi đó, bảng điều khiển XEM cho phép bạn chọn các biến cụ thể mà bạn muốn theo dõi. Bảng điều khiển này rất hữu ích vì nó cung cấp cho bạn thông tin chi tiết tức thì về những gì đang xảy ra với mã.

Nếu bạn nhìn lên trên cùng của giao diện người dùng, bạn cũng sẽ gặp một bảng điều khiển trông giống như thế này

Bảng điều khiển này kiểm soát tiến trình của trình gỡ lỗi thông qua chương trình. Mỗi điều khiển làm như sau

• Continue [F5] sẽ chạy qua điểm dừng và tiếp tục với phần còn lại của chương trình cho đến khi chạm điểm dừng tiếp theo.
• Bước qua [F10] sẽ đưa trình gỡ lỗi xuống dòng sau.
• Bước vào [F11] – thao tác này sẽ đưa trình gỡ lỗi vào chức năng sau
• Bước ra [F12] – thao tác này sẽ đưa trình gỡ lỗi ra khỏi chức năng và chuyển sang bước tiếp theo
• Khởi động lại [Ctrl+shift+F5] – khởi động lại toàn bộ trình gỡ lỗi
• Dừng [shift+F5] – dừng quá trình gỡ lỗi và thoát khỏi quá trình gỡ lỗi

Khi bạn nhấp vào một trong các điều khiển ở trên, về cơ bản, bạn đang làm chậm chương trình để có thể thấy các cập nhật xảy ra trong bảng điều khiển, các biến, đồng hồ và ngăn xếp cuộc gọi

Quay trở lại mẫu mã của chúng ta, nó sẽ đưa chúng ta đến hàm tính toán nếu chúng ta nhấp vào bước vào. Nếu chúng ta nhìn vào bảng điều khiển BIẾN , chúng ta sẽ thấy rằng các biến đã thay đổi để phản ánh các biến cục bộ. Khi bạn nhấp chuột phải vào biến, bạn có thể chọn nó làm mục tiêu để theo dõi. Cài đặt này sẽ thêm biến vào bảng điều khiển XEM theo bên dưới.

Nếu click vào step over thì nó sẽ chạy dòng sau. Bảng điều khiển của chúng tôi sẽ chỉ nói Đang thêm… bởi vì bảng điều khiển đã được thực thi. đăng nhập. Tuy nhiên, biến đã xem hiện đã thay đổi từ không xác định thành 0.

Nếu chúng ta chạy dòng sau, chúng ta sẽ thấy rằng biến sum bên trong watch đã thay đổi thành giá trị không chính xác. Bạn có thể suy luận rằng đã xảy ra lỗi ở dòng trước. Giờ đây, chúng tôi có thể khắc phục sự cố, chạy lại toàn bộ trình gỡ lỗi và đảm bảo mọi thứ đang hoạt động.

Gỡ lỗi mã bằng công cụ Lightrun

Mặc dù việc gỡ lỗi mã trong quá trình phát triển khá dễ dàng trong VSCode – đó là một loại trò chơi bóng khác khi gỡ lỗi trong sản xuất. Khi có lỗi trong quá trình sản xuất, chúng tôi không thể tắt máy chủ và lấy mã xuống để gỡ lỗi. Không chỉ vậy, việc sao chép các lỗi sản xuất trong môi trường phát triển có thể không thực hiện được. Đây là nơi Lightrun có thể trợ giúp

Lightrun là một công cụ sửa lỗi cho phép các nhà phát triển xem mã của họ hoạt động như thế nào trong thời gian thực. Nó cung cấp một giao diện trực quan giúp dễ dàng thêm nhật ký, chỉ số hiệu suất và ảnh chụp nhanh vào cơ sở mã. Lightrun có một số ưu điểm so với các công cụ sửa lỗi nội bộ truyền thống, chẳng hạn như cung cấp khả năng hiển thị mã được cải thiện và giúp xác định và sửa lỗi dễ dàng hơn

Công cụ này nhanh hơn và hiệu quả hơn nên các nhà phát triển có thể dành ít thời gian hơn để khắc phục sự cố mã. Việc sử dụng công cụ này cũng không ảnh hưởng đến hiệu suất của ứng dụng, điều này rất quan trọng đối với môi trường sản xuất. Bạn có thể đặt trước bản demo ngay hôm nay và xem cách Lightrun có thể tăng quy trình gỡ lỗi của bạn từ tốc độ của ốc sên lên tốc độ ánh sáng.

Lightrun cho Web hiện đã có

Chúng tôi muốn bạn tập trung vào những gì quan trọng và làm việc hiệu quả nhất có thể. Lightrun cho Web hiện khả dụng, không yêu cầu tích hợp hoặc cấu hình. Mong đợi tất cả các khả năng và tính năng mạnh mẽ của IDE mà Lightrun cung cấp, hiện đang chạy hoàn toàn trên trình duyệt và thậm chí còn dễ tiếp cận hơn đối với bất kỳ người dùng nào của chúng tôi.  

Bạn có thể kết nối trực tiếp với các ứng dụng trực tiếp của mình từ trình duyệt mà không cần tải xuống plugin chuyên dụng. Trải nghiệm của bạn khi sử dụng Lightrun cho Web phù hợp với tiện ích mở rộng VS Code trải nghiệm trực tiếp của chúng tôi, vì vậy bạn có thể tin tưởng vào một gói tính năng, thân thiện với người dùng . Bạn cũng có tất cả các biện pháp kiểm soát bảo mật được thi hành bởi Lightrun Sandbox™ và nhiều tiện ích mở rộng hữu ích khác như deep GitHub . Ngoài ra, bạn có thể mở bất kỳ repo GitHub nào trong VSCode chỉ bằng một thay đổi URL đơn giản. Sẵn sàng để thử? . . Plus, you can open any GitHub repo in VSCode with just a simple URL change. Ready to give it a try? Sign up here and start using Lightrun for the Web now. 

Chia sẻ

00

bài viết liên quan

Khắc phục sự cố thường gặp khi nhập JS – Nhập plugin Eslint

Đọc thêm

Khắc phục sự cố thường gặp trong Prettier – Đẹp hơn

Đọc thêm

Khắc phục sự cố thường gặp trong tulios KafkaJS

Đọc thêm