Tổng quan về bảng điều khiển Nguồn

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Sử dụng bảng điều khiển Nguồn công cụ của Chrome cho nhà phát triển để:

Xem tệp

Sử dụng ngăn Trang để xem tất cả các tài nguyên mà trang đã tải.

Ngăn Trang.

Cách sắp xếp ngăn Trang:

  • Cấp cao nhất, chẳng hạn như top trong ảnh chụp màn hình ở trên, đại diện cho khung HTML. Bạn sẽ thấy top trên mọi trang mà bạn truy cập. top đại diện cho khung tài liệu chính.
  • Cấp thứ hai, chẳng hạn như developers.google.com trên ảnh chụp màn hình ở trên, đại diện cho nguồn gốc.
  • Cấp độ thứ ba, cấp độ thứ tư, v.v. đại diện cho các thư mục và tài nguyên được tải từ nguồn gốc đó. Ví dụ: trên ảnh chụp màn hình ở trên, đường dẫn đầy đủ đến tài nguyên devsite-googler-button là developers.google.com/_static/19aa27122b/css/devsite-googler-button.

Nhấp vào một tệp trong ngăn Trang để xem nội dung của tệp đó trong ngăn Trình chỉnh sửa. Bạn có thể xem mọi loại tệp. Đối với hình ảnh, bạn sẽ thấy bản xem trước của hình ảnh.

Xem tệp trong ngăn Trình chỉnh sửa.

Chỉnh sửa CSS và JavaScript

Sử dụng ngăn Trình chỉnh sửa để chỉnh sửa CSS và JavaScript. Công cụ cho nhà phát triển cập nhật trang để chạy mã mới của bạn.

Trình chỉnh sửa cũng giúp bạn gỡ lỗi. Ví dụ: công cụ này sẽ gạch chân và hiện chú giải công cụ về lỗi cùng dòng bên cạnh lỗi cú pháp và các vấn đề khác, chẳng hạn như các câu lệnh @import và url() của CSS không thành công và các thuộc tính HTML href có URL không hợp lệ.

Chú giải công cụ lỗi cú pháp cùng dòng.

Nếu chỉnh sửa background-color của một phần tử, bạn sẽ thấy thay đổi có hiệu lực ngay lập tức.

Chỉnh sửa CSS trong ngăn Editor.

Để các thay đổi về JavaScript có hiệu lực, hãy nhấn Command+S (Mac) hoặc Control+S (Windows, Linux). Công cụ cho nhà phát triển không chạy lại tập lệnh, vì vậy, chỉ những thay đổi JavaScript có hiệu lực là những thay đổi mà bạn thực hiện bên trong hàm. Ví dụ: hãy lưu ý cách console.log('A') không chạy, trong khi console.log('B') thì có.

Chỉnh sửa JavaScript trong ngăn Editor.

Nếu Công cụ cho nhà phát triển chạy lại toàn bộ tập lệnh sau khi thực hiện thay đổi, thì văn bản A sẽ được ghi vào Bảng điều khiển.

Công cụ cho nhà phát triển sẽ xoá các thay đổi về CSS và JavaScript khi bạn tải lại trang. Xem phần Thiết lập không gian làm việc để tìm hiểu cách lưu các thay đổi vào hệ thống tệp của bạn.

Tạo, lưu và chạy Đoạn mã

Đoạn mã là các tập lệnh mà bạn có thể chạy trên bất kỳ trang nào. Hãy tưởng tượng rằng bạn liên tục nhập mã sau vào Bảng điều khiển để chèn thư viện jQuery vào một trang để bạn có thể chạy các lệnh jQuery từ Bảng điều khiển:

let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);

Thay vào đó, bạn có thể lưu mã này trong một Đoạn mã và chạy mã bằng vài lần nhấp vào nút, bất cứ khi nào bạn cần. Công cụ cho nhà phát triển lưu Đoạn mã vào hệ thống tệp của bạn. Ví dụ: kiểm tra một Đoạn mã chèn thư viện jQuery vào một trang.

Một đoạn mã chèn thư viện jQuery vào một trang.

Để chạy một Đoạn mã:

  • Mở tệp trong ngăn Đoạn mã rồi nhấp vào biểu tượng Chạy Nút Run (Chạy). trên thanh thao tác ở dưới cùng.
  • Mở Trình đơn lệnh, xoá ký tự >, nhập !, nhập tên của Đoạn mã rồi nhấn phím Enter.

Xem Chạy đoạn mã từ trang bất kỳ để tìm hiểu thêm.

Gỡ lỗi JavaScript

Thay vì sử dụng console.log() để dự đoán nơi JavaScript đang gặp sự cố, hãy cân nhắc sử dụng các công cụ gỡ lỗi cho Công cụ của Chrome cho nhà phát triển. Ý tưởng chung là đặt một điểm ngắt (đây là điểm dừng có ý định trong mã của bạn), sau đó duyệt qua quá trình thực thi mã, từng dòng một.

Tạm dừng tại một điểm ngắt.

Khi duyệt qua mã, bạn có thể xem và thay đổi giá trị của tất cả các thuộc tính và biến được xác định hiện tại, chạy JavaScript trong Bảng điều khiển và làm nhiều việc khác.

Xem bài viết Bắt đầu gỡ lỗi JavaScript để tìm hiểu kiến thức cơ bản về gỡ lỗi trong Công cụ cho nhà phát triển.

Chỉ tập trung vào mã của bạn

Dịch vụ Công cụ của Chrome cho nhà phát triển cho phép bạn chỉ tập trung vào mã mà bạn là tác giả bằng cách lọc ra tiếng ồn do khung tạo ra và xây dựng các công cụ mà bạn sử dụng khi xây dựng ứng dụng web.

Để cung cấp cho bạn trải nghiệm gỡ lỗi web hiện đại, Công cụ cho nhà phát triển sẽ thực hiện những việc sau:

Ngoài ra, nếu được các khung hỗ trợ, Ngăn xếp lệnh gọi trong trình gỡ lỗi và dấu vết ngăn xếp trong Bảng điều khiển sẽ cho thấy toàn bộ nhật ký hoạt động không đồng bộ.

Để tìm hiểu thêm, hãy xem:

Thiết lập Workspace

Theo mặc định, khi bạn chỉnh sửa một tệp trong bảng điều khiển Nguồn, những thay đổi đó sẽ bị mất khi bạn tải lại trang. Không gian làm việc cho phép bạn lưu những thay đổi mà bạn thực hiện trong Công cụ cho nhà phát triển vào hệ thống tệp của mình. Về cơ bản, việc này cho phép bạn sử dụng Công cụ cho nhà phát triển làm trình soạn thảo mã.

Hãy xem bài viết Chỉnh sửa tệp bằng không gian làm việc để bắt đầu.