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 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 trong ảnh chụp màn hình ở trên, thể hiện nguồn gốc.
  • Cấp thứ ba, cấp thứ tư, v.v. biểu thị các thư mục và tài nguyên đã 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 ngăn Page để xem nội dung của tệp đó trong ngăn Editor (Trình chỉnh sửa). Bạn có thể xem mọi loại của tệp. Đối với hình ảnh, bạn sẽ thấy bản xem trước của hình ảnh.

Xem một 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 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 sẽ gạch dưới và hiển thị chú thích lỗi cùng dòng bên cạnh các lỗi cú pháp và các vấn đề khác, chẳng hạn như câu lệnh CSS @import và url() không thành công hay các thuộc tính HTML href 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 sự 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 đố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ụ: lưu ý cách console.log('A') không chạy, trong khi console.log('B') thì chạy.

Chỉnh sửa JavaScript trong ngăn 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 nhật ký 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. Hãy xem bài viết Thiết lập Workspace để tìm hiểu cách lưu nội dung 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 rằng bạn liên tục nhập mã sau trong 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 cú nhấp vào nút bất cứ lúc nào bạn cần 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 trích để 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 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, xóa ký tự >, nhập !, nhập tên của Đoạn 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 lỗi JavaScript của bạn, hãy cân nhắc sử dụng Thay vào đó, 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, cố ý dừng lại trong mã, sau đó bước qua quá trình thực thi mã, mỗi dòng một dòng bất cứ lúc nào.

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

Khi duyệt qua mã này, bạn có thể xem và thay đổi giá trị của tất cả các giá trị hiện được xác định các thuộc tính và biến, chạy JavaScript trong Bảng điều khiển và nhiều nội dung 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 chỉ cho phép bạn tập trung vào mã mà bạn tạo bằng cách lọc ra tiếng ồn do khung và công cụ xây dựng tạo ra 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 Công cụ cho nhà phát triển vào tệp của mình hệ thống. Về cơ bản, công 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ã của mình.

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.