Gỡ lỗi mã JavaScript chỉ được hỗ trợ trong Google Chrome và trong các trình duyệt dựa trên Chromium khác
Hướng dẫn bên dưới hướng dẫn bạn qua các bước cơ bản để bắt đầu với trình gỡ lỗi này
Để tìm hiểu cách gỡ lỗi mã PHP và JavaScript đồng thời từ bên trong PhpStorm, hãy xem Gỡ lỗi mã PHP và JavaScript cùng lúc
Trước khi bạn bắt đầu
Đảm bảo plugin đi kèm JavaScript và TypeScript được bật trong phần cài đặt. Nhấn Ctrl+Alt+S để mở cài đặt IDE và chọn Plugin . Nhấp vào tab Đã cài đặt . Trong trường tìm kiếm, nhập JavaScript và TypeScript . Để biết thêm chi tiết về plugin, hãy xem Quản lý plugin.
Đảm bảo rằng plugin đi kèm Trình gỡ lỗi JavaScript được bật trong phần cài đặt. Nhấn Ctrl+Alt+S để mở cài đặt IDE và chọn Plugin . Nhấp vào tab Đã cài đặt . Trong trường tìm kiếm, nhập Trình gỡ lỗi JavaScript . Để biết thêm chi tiết về plugin, hãy xem Quản lý plugin.
Định cấu hình trình gỡ lỗi tích hợp như được mô tả trong Định cấu hình trình gỡ lỗi JavaScript
Để những thay đổi bạn thực hiện đối với mã HTML, CSS hoặc JavaScript của mình được hiển thị ngay lập tức trong trình duyệt mà không cần tải lại trang, hãy kích hoạt Chỉnh sửa trực tiếp functionality. For more details about the live editing functionality, see Live Edit in HTML, CSS, and JavaScript.
Gỡ lỗi một ứng dụng đang chạy trên máy chủ tích hợp
PhpStorm có một máy chủ web tích hợp có thể được sử dụng để xem trước và gỡ lỗi ứng dụng của bạn. Máy chủ này luôn chạy và không yêu cầu bất kỳ cấu hình thủ công nào. Tất cả các tệp dự án được cung cấp trên máy chủ tích hợp với URL gốc http. //máy chủ cục bộ. , liên quan đến cấu trúc dự án.
Bắt đầu gỡ lỗi
Đặt các điểm dừng trong mã JavaScript, theo yêu cầu
Mở tệp HTML tham chiếu JavaScript để gỡ lỗi hoặc chọn tệp HTML trong cửa sổ công cụ Dự án
Từ menu ngữ cảnh của trình chỉnh sửa hoặc lựa chọn, chọn Gỡ lỗi . PhpStorm tạo cấu hình gỡ lỗi và bắt đầu phiên gỡ lỗi thông qua cấu hình đó. Tệp sẽ mở trong trình duyệt và cửa sổ công cụ Gỡ lỗi xuất hiện.
Để lưu cấu hình được tạo tự động để sử dụng lại sau này, hãy chọn Lưu từ menu ngữ cảnh sau khi phiên gỡ lỗi kết thúc.
Trong cửa sổ công cụ Gỡ lỗi , hãy tiếp tục như bình thường. xem qua chương trình, quá trình thực thi chương trình, kiểm tra chương trình khi bị treo, xem HTML DOM thực, chạy các đoạn mã JavaScript trong Bảng điều khiển, v.v.
Theo mặc định, phiên gỡ lỗi bắt đầu trong một cửa sổ mới với dữ liệu người dùng Chrome tùy chỉnh. Để mở một phiên bản Chrome mới với giao diện quen thuộc của bạn, hãy định cấu hình Chrome trong PhpStorm để bắt đầu với dữ liệu người dùng của bạn, hãy xem để biết chi tiết
Thí dụ
Giả sử bạn có một ứng dụng đơn giản bao gồm một chỉ mục. html và một chỉ mục. js , trong đó chỉ mục. html tài liệu tham khảo chỉ mục. js . Để bắt đầu gỡ lỗi ứng dụng này bằng máy chủ tích hợp, hãy mở index. html trong trình chỉnh sửa và chọn Gỡ lỗi 'chỉ mục. html' từ menu ngữ cảnh.
PhpStorm tự động tạo cấu hình chạy/gỡ lỗi và phiên gỡ lỗi bắt đầu.
Để khởi động lại cấu hình chạy/gỡ lỗi mới, hãy nhấp vào nút Gỡ lỗi [] ở phía trên . Gỡ lỗi Run | Debug từ menu chính.
Tải lại trang hiện tại trong trình duyệt
Ngoài việc khởi động lại ứng dụng của bạn bằng cách nhấp vào nút Chạy lại [] trong Debug tool window, you can also click the Reload in Browser button [] to reload the page where you have currently navigated. This works the same way as the Tải lại trang [Ctrl+R] trong Chrome.
Ví dụ dưới đây cho thấy một ứng dụng đơn giản bao gồm hai trang HTML và một tập lệnh JavaScript. Nơi bắt đầu nhà. Trang html có nút Gửi khi nhấn máy tính. Trang html mở ra với kết quả của Máy tính. js thực thi tập lệnh.
Trong phiên gỡ lỗi, việc nhấp vào nút Chạy lại [] sẽ tải lại home.html bằng nút Gửi . Việc nhấp vào nút Tải lại trong trình duyệt [] sẽ tải lại máy tính . html để tất cả đầu ra tập lệnh trước đó bị xóa và trình gỡ lỗi quay lại dòng 1 trong Máy tính. js .
Gỡ lỗi một ứng dụng đang chạy trên máy chủ cục bộ ở chế độ phát triển
Nếu ứng dụng của bạn đang chạy ở chế độ phát triển trên localhost
, bạn có thể bắt đầu gỡ lỗi ứng dụng đó từ Terminal tích hợp sẵn [Alt+F12 . Chỉ cần giữ Ctrl + Shift và nhấp vào URL mà ứng dụng đang chạy.
Đặt các điểm dừng trong mã của bạn
Khởi động ứng dụng ở chế độ phát triển, ví dụ: sử dụng tập lệnh npm
Cửa sổ công cụ Run hoặc Terminal hiển thị . Giữ Ctrl + Shift và nhấp vào liên kết URL này. PhpStorm bắt đầu phiên gỡ lỗi với cấu hình được tạo tự động thuộc loại Gỡ lỗi JavaScript.
Điều này cũng hoạt động để gỡ lỗi , , và ứng dụng
Gỡ lỗi ứng dụng đang chạy trên máy chủ web bên ngoài
Thông thường, bạn có thể muốn gỡ lỗi JavaScript phía máy khách của một ứng dụng đang chạy trên một máy chủ web phát triển bên ngoài, ví dụ như được cung cấp bởi Node. js
Đặt các điểm dừng trong mã JavaScript, theo yêu cầu
Chạy ứng dụng ở chế độ phát triển . Thường thì bạn cần chạy
npm start
cho điều đó.Khi máy chủ phát triển đã sẵn sàng, hãy sao chép địa chỉ URL mà ứng dụng đang chạy trong trình duyệt - bạn sẽ cần chỉ định địa chỉ URL này trong cấu hình chạy/gỡ lỗi
Tạo cấu hình gỡ lỗi thuộc loại Gỡ lỗi JavaScript . từ menu chính, chọn Chạy. Chỉnh sửa cấu hình , trong hộp thoại Chỉnh sửa cấu hình mở ra, hãy nhấp vào Thêm . Trong Cấu hình Chạy/Gỡ lỗi. Hộp thoại Gỡ lỗi JavaScript mở ra, hãy chỉ định địa chỉ URL mà ứng dụng đang chạy tại đó. URL này có thể được sao chép từ thanh địa chỉ của trình duyệt của bạn như được mô tả trong button [] on the toolbar and select JavaScript Debug from the list. In the Run/Debug Configuration: JavaScript Debug dialog that opens, specify the URL address at which the application is running. This URL can be copied from the address bar of your browser as described in Bước 2 ở trên. Nhấp vào OK để lưu cài đặt cấu hình.
Chọn cấu hình mới được tạo từ danh sách Chọn cấu hình chạy/gỡ lỗi trên thanh công cụ và nhấp vào Run button [] next to the list. The URL address specified in the run configuration opens in the browser and the Debug tool window appears.
Trong cửa sổ công cụ Gỡ lỗi , hãy tiếp tục như bình thường. xem qua chương trình, quá trình thực thi chương trình, kiểm tra chương trình khi bị treo, xem HTML DOM thực, chạy các đoạn mã JavaScript trong Bảng điều khiển, v.v. .
Để biết thêm các ví dụ gỡ lỗi, hãy xem các bài đăng sau trong blog WebStorm. Gỡ lỗi ứng dụng React và gỡ lỗi ứng dụng góc