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 Sources (Nguồn) để xem và chỉnh sửa tài nguyên trên trang web của bạn, chẳng hạn như biểu định kiểu, tệp JavaScript và hình ảnh.

Tổng quan

Bảng điều khiển Sources (Nguồn) cho phép bạn làm những việc sau:

Mở bảng điều khiển Nguồn

Để mở bảng điều khiển Nguồn, hãy làm theo các bước sau:

  1. Mở Công cụ cho nhà phát triển.
  2. Mở Trình đơn lệnh bằng cách nhấn:
    • macOS: Command+Shift+P
    • Windows, Linux, ChromeOS: Control+Shift+P
  3. Bắt đầu nhập sources, chọn Hiển thị bảng điều khiển Nguồn rồi nhấn Enter.

Hoặc ở góc trên cùng bên phải, hãy chọn more_vert Tuỳ chọn khác > Công cụ khác > Nguồn.

Xem tệp

Nhấp vào thẻ Trang để xem tất cả tài nguyên mà trang đã tải.

Thẻ Trang.

Cách sắp xếp thẻ Trang:

  • Cấp cao nhất, chẳng hạn như top trên ảnh chụp màn hình ở trên, đại diện cho một khung HTML. Bạn sẽ tìm 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 một gốc.
  • Cấp ba, cấp bốn, 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ụ: trong ả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 thẻ Trang để xem nội dung của tệp đó trong thẻ 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 thẻ Trình chỉnh sửa.

Chỉnh sửa CSS và JavaScript

Nhấp vào thẻ Trình chỉnh sửa để chỉnh sửa CSS và JavaScript. Công cụ cho nhà phát triển sẽ 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ụ: trình bổ trợ này gạch chân và hiển thị chú giải công cụ lỗi nội tuyến bên cạnh lỗi cú pháp và các vấn đề khác, chẳng hạn như câu lệnh @import và url() CSS không thành công, cũng như các thuộc tính href HTML có URL không hợp lệ.

Chú thích về 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 nội dung thay đổi đó có hiệu lực ngay lập tức.

Chỉnh sửa CSS trong thẻ Trình chỉnh sửa.

Để các thay đổi đối với 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, do đó, chỉ có những thay đổi về JavaScript có hiệu lực là những thay đổi 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') lại chạy.

Chỉnh sửa JavaScript trong thẻ Trình chỉnh sửa.

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á những thay đổi về CSS và JavaScript khi bạn tải lại trang. Xem Thiết lập không gian làm việc để tìm hiểu cách lưu các thay đổi đối với 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 bạn nhập đi nhập lại mã sau trong Console để chèn thư viện jQuery vào một trang, nhờ đó bạn có thể chạy các lệnh jQuery từ Console:

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. DevTools sẽ 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.

Đ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 thẻ Đ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 Mảnh mã, sau đó nhấn Enter.

Xem bài viết 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 vị trí xảy ra lỗi của JavaScript, hãy cân nhắc sử dụng các công cụ gỡ lỗi của Chrome cho nhà phát triển. Ý tưởng chung là đặt một điểm ngắt, đây là một điểm dừng có chủ ý trong mã, sau đó thực thi từng dòng mã.

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 hiện đã được xác định, chạy JavaScript trong Bảng điều khiển và làm nhiều việc khác.

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

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

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 viết bằng cách lọc ra những thông tin không liên quan do các khung và công cụ xây dựng tạo ra mà bạn tận 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 Sources (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 các thay đổi mà bạn thực hiện trong DevTools vào hệ thống tệp. Về cơ bản, việc này cho phép bạn sử dụng DevTools làm trình soạn thảo mã.

Hãy xem bài viết Chỉnh sửa tệp bằng Workspaces để bắt đầu.