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 Show
Để 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": "http://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 Gỡ lỗi là một bước thiết yếu trong quá trình phát triển phần mềm, vì nó cho phép các nhà phát triển sửa lỗi trước khi phát hành phần mềm ra công chúng. Các công cụ gỡ lỗi có thể được tích hợp vào trình chỉnh sửa mã, giúp quá trình gỡ lỗi hiệu quả hơn. Hướng dẫn này sẽ chỉ cho bạn cách gỡ lỗi nút. js trong Mã Visual Studionú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à
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ếtTrước khi chúng tôi bắt đầu hướng dẫn này, chúng tôi sẽ giả định như sau
Đố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.
Sử dụng công cụ gỡ lỗi VSCodeVSCode đ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
Đô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
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ụ LightrunMặ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 Bạn thực sự có thể hiểu những gì đang diễn ra bên trong các ứng dụng trực tiếp của mình. Đó là một hình thức đăng ký đi |