Gỡ lỗi PHP trong bảng điều khiển Chrome

1. Đả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.

2. Đả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.

3. Đị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.

Bắt đầu gỡ lỗi

1. Đặt các điểm dừng trong mã JavaScript, theo yêu cầu

2. 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

3. 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.

4. 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.

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 .

1. Đặt các điểm dừng trong mã của bạn

2. Khởi động ứng dụng ở chế độ phát triển, ví dụ: sử dụng tập lệnh npm

3. 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.

1. Đặt các điểm dừng trong mã JavaScript, theo yêu cầu

2. 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

3. 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.

4. 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.

5. 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. .