Developer console trong Javascript

Mã dễ bị lỗi. Bạn rất có thể sẽ mắc lỗi… Ồ, tôi đang nói về cái gì vậy? Bạn hoàn toàn sẽ mắc lỗi, ít nhất là nếu bạn là con người, không phải rô bốt .

Nhưng trong trình duyệt, người dùng không thấy lỗi theo mặc định. Vì vậy, nếu có gì đó sai trong kịch bản, chúng tôi sẽ không thấy những gì bị hỏng và không thể sửa chữa nó.

Để xem lỗi và nhận được nhiều thông tin hữu ích khác về tập lệnh, "công cụ dành cho nhà phát triển" đã được nhúng vào trình duyệt.

Hầu hết các nhà phát triển đều hướng tới Chrome hoặc Firefox để phát triển vì những trình duyệt đó có các công cụ dành cho nhà phát triển tốt nhất. Các trình duyệt khác cũng cung cấp các công cụ dành cho nhà phát triển, đôi khi có các tính năng đặc biệt, nhưng thường chơi “bắt kịp” Chrome hoặc Firefox. Vì vậy, hầu hết các nhà phát triển đều có trình duyệt “yêu thích” và chuyển sang trình duyệt khác nếu vấn đề xảy ra với trình duyệt cụ thể.

Các công cụ dành cho nhà phát triển rất mạnh; chúng có nhiều tính năng. Để bắt đầu, chúng ta sẽ học cách mở chúng, xem lỗi và chạy các lệnh JavaScript.

Google Chrome

Mở trang bug.html .

Có lỗi trong mã JavaScript trên đó. Nó bị che khuất khỏi tầm mắt của khách truy cập thường xuyên, vì vậy hãy mở các công cụ dành cho nhà phát triển để xem nó.

Nhấn F12 hoặc, nếu bạn đang sử dụng Mac, sau đó .Cmd+Opt+J

Các công cụ dành cho nhà phát triển sẽ mở trên tab Bảng điều khiển theo mặc định.

Nó trông giống như thế này:

Giao diện chính xác của các công cụ dành cho nhà phát triển phụ thuộc vào phiên bản Chrome của bạn. Nó thay đổi theo thời gian nhưng phải tương tự.

Ở đây chúng ta có thể thấy thông báo lỗi màu đỏ. Trong trường hợp này, tập lệnh chứa lệnh “lalala” không xác định.

Ở bên phải, có một liên kết có thể nhấp tới nguồn bug.html:12với số dòng nơi đã xảy ra lỗi.

Bên dưới thông báo lỗi, có một >biểu tượng màu xanh lam . Nó đánh dấu một “dòng lệnh” nơi chúng ta có thể nhập các lệnh JavaScript. Nhấn Enterđể chạy chúng.

Bây giờ chúng ta có thể thấy lỗi, và như vậy là đủ để bắt đầu. Chúng tôi sẽ quay lại với các công cụ dành cho nhà phát triển sau và đề cập đến việc gỡ lỗi chuyên sâu hơn trong chương Gỡ lỗi trong trình duyệt .

Firefox, Edge và các trình duyệt khác

Hầu hết các trình duyệt khác sử dụng F12để mở các công cụ dành cho nhà phát triển.

Giao diện của chúng khá giống nhau. Sau khi biết cách sử dụng một trong những công cụ này (bạn có thể bắt đầu với Chrome), bạn có thể dễ dàng chuyển sang một công cụ khác.

Safari

Safari (trình duyệt Mac, không được Windows / Linux hỗ trợ) có một chút đặc biệt ở đây. Trước tiên, chúng tôi cần bật “Trình đơn phát triển”.

Mở Tùy chọn và chuyển đến ngăn “Nâng cao”. Có một hộp kiểm ở dưới cùng:

Tóm lược

Các công cụ dành cho nhà phát triển cho phép chúng tôi xem lỗi, chạy lệnh, kiểm tra các biến và hơn thế nữa.

Chúng có thể được mở với F12hầu hết các trình duyệt trên Windows. Chrome dành cho Mac cần , Safari: (cần kích hoạt trước).Cmd+Opt+JCmd+Opt+C

Bây giờ chúng tôi có môi trường sẵn sàng. Trong phần tiếp theo, chúng ta sẽ nói về JavaScript.