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

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

Sử dụng bảng điều khiển Nguồn để xem và chỉnh sửa các tài nguyên của trang web, chẳng hạn như biểu định kiểu, tệp JavaScript và hình ảnh.

Tổng quan

Bảng 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 Show Sources panel (Hiện bảng điều khiển Nguồn) rồi nhấn Enter.

Hoặc ở góc trên 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, biểu thị một khung HTML. Bạn sẽ thấy biểu tượng top trên mọi trang mà bạn truy cập. top biểu thị 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, biểu thị một 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 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ụ: công cụ này gạch chân và hiện chú thích lỗi nội tuyến bên cạnh các lỗi cú pháp và vấn đề khác, chẳng hạn như câu lệnh CSS @import và url() không thành công, cũng như thuộc tính HTML href có URL không hợp lệ.

Chú thích 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ụ cho nhà phát triển không chạy lại tập lệnh, vì vậy, những thay đổi duy nhất đối với JavaScript có hiệu lực là những thay đổi mà bạn thực hiện trong các hàm. Ví dụ: lưu ý cách console.log('A') không chạy, trong khi console.log('B') thì có.

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 bạn thực hiện thay đổi, thì văn bản A sẽ được ghi vào nhật ký Bảng điều khiển.

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 một Workspace để tìm hiểu cách lưu các thay đổi vào hệ thống tệp.

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

Đoạn mã là tập lệnh mà bạn có thể chạy trên mọi trang. Giả sử 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, nhờ đó 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à kích hoạt mã đó chỉ bằng vài lần nhấp vào nút bất cứ lúc nào bạn cần. DevTools lưu Đoạn mã vào hệ thống tệp của bạn. Ví dụ: hãy xem xét 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.

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

  • Mở tệp trong thẻ Đoạn mã rồi nhấp vào Chạy Nút 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 Đoạn mã, rồi nhấn phím Enter.

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

Gỡ lỗi JavaScript

Thay vì dùng console.log() để suy luận về vị trí mà JavaScript của bạn đang gặp vấn đề, hãy cân nhắc sử dụng các công cụ gỡ lỗi của Chrome DevTools. Ý tưởng chung là đặt một điểm ngắt (đây là vị trí dừng có chủ ý trong mã của bạn), rồi từng bước thực hiện quá trình thực thi mã, mỗi lần một dòng.

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

Khi thực hiện từng bước trong 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.v.

Hãy xem bài viết Bắt đầu gỡ lỗi JavaScript để tìm hiểu những 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

Chrome DevTools cho phép bạn chỉ tập trung vào mã mà bạn tạo bằng cách lọc bỏ những thông tin không liên quan do các khung và công cụ tạo mà bạn tận dụng khi tạo ứng dụng web.

Để mang đến cho bạn trải nghiệm gỡ lỗi web hiện đại, DevTools sẽ làm như 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 Công cụ cho nhà phát triển vào hệ thống tệp. Về cơ bản, tính năng này cho phép bạn sử dụng DevTools làm trình soạn thảo mã.

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