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

418

Khi sử dụng Google Chrome, tôi muốn gỡ lỗi một số mã JavaScript. Làm thế nào tôi có thể làm điều đó?

javascript  google-chrome  debugging  google-chrome-devtools 
— Kevin Dryger
nguồn
— Bergi
— Mạnh
Bạn cũng có thể thấy điều này hữu ích: Cách kết thúc tập lệnh-thực thi-khi-gỡ lỗi trong Google-Chrome
— cssyphus

Câu trả lời:

318

Windows: CTRL- SHIFT- JHOẶC F12

Mạc: ⌥- ⌘-J

Cũng có sẵn thông qua menu cờ lê (Công cụ> Bảng điều khiển JavaScript):

Menu bảng điều khiển JavaScript

— John Sheehan
nguồn
23
Tôi nghĩ rằng phím tắt đã thay đổi thành CTRL-SHIFT-J.
— Martijn Laarman
5
hoặc Cmd-Shift-J cho máy Mac. Chúa tôi yêu <kbd>thẻ này . Quá tệ, tôi không thể sử dụng nó trong các ý kiến.
— Anurag
11
Phím tắt Mac dường như thực sự có Alt-Cmd-Jtrên bản dựng Chrome mới nhất.
— Mathew Byrne
64
F12là cách đơn giản nhất
— Juan Mendes
Nhìn vào câu hỏi này khiến tôi hiểu các kỹ năng javascript của tôi đã cải thiện bao nhiêu từ cấp độ người mới đến các tiêu chuẩn khá tốt
— Kamal Reddy
399

Hãy thử thêm nó vào nguồn của bạn:

debugger;

Nó hoạt động trong hầu hết, nếu không phải tất cả các trình duyệt. Chỉ cần đặt nó ở đâu đó trong mã của bạn, và nó sẽ hoạt động như một điểm dừng.

— Omer van Kloeten
nguồn
Thật khó để tìm thấy lệnh này được gọi là gì nếu bạn quên nó!
— Ahmed Fasih
4
Google cũng khó khăn vì lý do tại sao điều này không luôn luôn hoạt động. Có những hạn chế về điều này?
— Seanonymous
2
Bạn cần mở Công cụ dành cho nhà phát triển Chrome để làm việc này (nhấn F12 trên Windwos / Linux, không biết khóa trên máy Mac hoặc chỉ kiểm tra một yếu tố). Nếu bạn mở Công cụ dành cho nhà phát triển, một điều tuyệt vời nữa là bạn có thể nhấp và giữ nút Làm mới để xóa bộ đệm.
— toon81
2
@CallumRogers Chỉ khi người dùng của bạn sử dụng trang web của bạn với Công cụ dành cho nhà phát triển mở.
— Josh M.
3
@JoshM. Xin lưu ý rằng việc để lại mã này trong Mã sản xuất là rất tệ vì nó gây ra sự cố trong các phiên bản IE nhất định ngay cả đối với người dùng không mở công cụ dev.
— Omer van Kloeten
57

Windows và Linux:

Ctrl+ Shift+ Iphím để mở Công cụ dành cho nhà phát triển

Ctrl+ Shift+ Jđể mở Công cụ dành cho nhà phát triển và tập trung vào Bảng điều khiển.

Ctrl+ Shift+ Cđể chuyển chế độ Kiểm tra phần tử.

Mac:

⌥+ ⌘+ Iphím để mở Công cụ dành cho nhà phát triển

⌥+ ⌘+ Jđể mở Công cụ dành cho nhà phát triển và tập trung vào Bảng điều khiển.

⌥+ ⌘+ Cđể chuyển chế độ Kiểm tra phần tử.

Nguồn

Các phím tắt khác

— người dùng629309
nguồn
3
Trên mac, phím tắt để chuyển đổi chế độ phần tử kiểm tra là shift C (Shift - Command - C)
— Roberto Barros
15

Nhấn phím F12chức năng trong trình duyệt Chrome để khởi chạy trình gỡ lỗi JavaScript và sau đó nhấp vào "Tập lệnh".

Chọn tệp JavaScript ở trên cùng và đặt điểm dừng cho trình gỡ lỗi cho mã JavaScript.

— Balachandar P
nguồn
3
F12 dường như không mở trình gỡ lỗi trên hệ thống Windows 7 của tôi với Chrome 23.0.1246.0 dev-m.
— astletron
+1 cho F12, nó cũng hoạt động cho IE, FF, Edge. Không cần phải học Emacs như tổ hợp phím. Ngoại trừ Mac.
— Csaba Toth
11

Ctrl+ Shift+ Jmở Công cụ dành cho nhà phát triển.

— Senyai
nguồn
6

Trong Chrome 8.0.552 trên máy Mac, bạn có thể tìm thấy mục này trong menu Xem / Nhà phát triển / Bảng điều khiển JavaScript ... hoặc bạn có thể sử dụng Alt+ CMD+ J.

— Primc
nguồn
2

Shift+ Control+ Imở cửa sổ công cụ Nhà phát triển. Từ hình ảnh thứ hai dưới cùng bên trái (trông giống như sau) sẽ mở / ẩn bảng điều khiển cho bạn:

Hiển thị bảng điều khiển

— Premanshu
nguồn
2

Để mở bảng điều khiển 'Bảng điều khiển dành riêng, một trong hai:

  • Sử dụng các phím tắt
    • Trên Windows và Linux: Ctrl+ Shift+J
    • Trên máy Mac: Cmd+ Option+J
  • Chọn biểu tượng Menu Chrome, menu -> Công cụ khác -> Bảng điều khiển JavaScript . Hoặc nếu Công cụ dành cho nhà phát triển Chrome đã mở, presstab 'Bảng điều khiển'.

Vui lòng tham khảo tại đây

— Venkat
nguồn
1

Đối với người dùng Mac, hãy truy cập Google Chrome -> menu Xem -> Nhà phát triển -> Bảng điều khiển JavaScript .

Ảnh chụp màn hình

— Neo123
nguồn
1

Bây giờ google chrome đã giới thiệu tính năng mới. Bằng cách sử dụng tính năng này Bạn có thể chỉnh sửa mã của mình trong trình duyệt chrome. (Thay đổi vĩnh viễn về vị trí mã)

Đối với điều đó Nhấn F12 -> Tab nguồn - (bên phải) -> Hệ thống tệp - trong đó vui lòng chọn vị trí mã của bạn. và sau đó trình duyệt chrome sẽ yêu cầu bạn cho phép và sau đó mã đó sẽ chìm với màu xanh lục. và bạn có thể sửa đổi mã của mình và nó cũng sẽ phản ánh vị trí mã của bạn (Điều đó có nghĩa là nó sẽ thay đổi vĩnh viễn)

Cảm ơn

— ngăn xếp
nguồn
0

Cách hiệu quả nhất mà tôi đã tìm thấy để truy cập trình gỡ lỗi javascript là chạy nó:

chrome://inspect

— Nestor Urquiza
nguồn
0

F12 mở bảng điều khiển dành cho nhà phát triển

CTRL + SHIFT + C Sẽ mở công cụ di chuột để kiểm tra, nơi nó làm nổi bật các yếu tố khi bạn di chuột và bạn có thể nhấp để hiển thị nó trong tab phần tử.

CTRL + SHIFT + I Mở bảng điều khiển dành cho nhà phát triển bằng tab bảng điều khiển

RIGHT-CLICK> Kiểm tra Nhấp chuột phải vào bất kỳ yếu tố nào và nhấp vào "kiểm tra" để chọn nó trong tab Thành phần của bảng Nhà phát triển.

ESC Nếu bạn nhấp chuột phải và kiểm tra phần tử hoặc tương tự và kết thúc trong tab "Phần tử" nhìn vào DOM, bạn có thể nhấn ESC để chuyển đổi bảng điều khiển lên và xuống, đây có thể là một cách hay để sử dụng cả hai.

— OG Sean
nguồn
-5

Từ bảng điều khiển trong Chrome, bạn có thể làm được console.log(data_to_be_displayed).

— anand
nguồn
3
Điều này sẽ không mở giao diện điều khiển. Điều này sẽ chỉ đăng nhập vào giao diện điều khiển.
— Shaz
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.