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 của trang web, chẳng hạn như các tệp 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 Command (Lệnh) bằng cách nhấn:
    • macOS: Command+Shift+P
    • Windows, Linux, ChromeOS: Ctrl+Shift+P
  3. Bắt đầu nhập sources, chọn Show Sources panel (Hiển thị bảng điều khiển Nguồn) rồi nhấn Enter.

Ngoài ra, ở góc trên cùng bên phải, hãy chọn biểu tượng 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ụ: 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 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.

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ú giải lỗi cú pháp nội tuyến.

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 thẻ Trình chỉnh sửa.

Để các thay đổi đối với JavaScript có hiệu lực, hãy nhấn tổ hợp phím Command+S (Mac) hoặc Control+S (Windows, Linux). Công cụ phát triển không chạy lại tập lệnh, vì vậy, những thay đổi duy nhất về JavaScript có hiệu lực là những thay đổi mà bạn thực hiện bên trong các 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 DevTools 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 Console.

DevTools sẽ xoá các thay đổi về CSS và JavaScript khi bạn tải lại trang. Hãy xem phần Thiết lập Workspace để tìm hiểu cách lưu các thay đổi đối với hệ thống tệp.

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 một vài thao tác 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ụ: hãy kiểm tra một Mảnh 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.

Cách chạy một Đoạn mã:

  • Mở tệp trong thẻ Snippets (Mảnh mã) rồi nhấp vào biểu tượng Run (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.

Hãy xem bài viết Chạy đoạn mã từ bất kỳ trang nào để tìm hiểu thêm.

Gỡ lỗi JavaScript

Thay vì sử dụng console.log() để suy luận xem JavaScript của bạn đang gặp lỗi ở đâu, hãy cân nhắc sử dụng các công cụ gỡ lỗi trong 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à 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 xem 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 Console (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 mã

Công cụ của Chrome cho nhà phát triển giú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 khi bạn xây dựng ứng dụng web.

Để mang đến cho bạn trải nghiệm gỡ lỗi web hiện đại, DevTools 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ẽ hiển thị toàn bộ nhật ký của các thao tác 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.