Trang này được dịch bởi Cloud Translation API.

Chạy đoạn mã JavaScript

Kayce Basques

Sofia Emelianova

Nếu bạn thấy mình liên tục chạy cùng một mã trong Console, hãy cân nhắc lưu mã đó dưới dạng một đoạn mã. Đoạn mã có quyền truy cập vào ngữ cảnh JavaScript của trang. Đây là một giải pháp thay thế cho bookmarklet.

Bạn có thể tạo đoạn mã trong bảng điều khiển Nguồn và chạy đoạn mã đó trên bất kỳ trang nào và ở chế độ ẩn danh.

Ví dụ: ảnh chụp màn hình bên dưới cho thấy trang chủ tài liệu DevTools ở bên trái và một số mã nguồn đoạn mã trong ngăn Sources > Snippets (Nguồn > Đoạn mã) ở bên phải.

Trang chủ tài liệu về Công cụ cho nhà phát triển trước khi chạy đoạn mã. Nút Chạy được làm nổi bật.

Dưới đây là mã nguồn đoạn mã ghi lại một số thông báo và thay thế nội dung HTML của trang chủ bằng phần tử <p> chứa thông báo:

console.log('Hello, Snippets!');
document.body.innerHTML = '';
const p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);

Khi bạn nhấp vào nút Run (Chạy), ngăn Console (Bảng điều khiển) sẽ bật lên để hiển thị thông báo Hello, Snippets! mà đoạn mã ghi lại và nội dung của trang sẽ thay đổi.

Trang chủ sau khi chạy đoạn mã.

Mở ngăn Đoạn mã

Ngăn Snippets (Đoạn mã) liệt kê các đoạn mã của bạn. Để chỉnh sửa một đoạn mã, hãy mở đoạn mã đó theo một trong hai cách sau:

Chuyển đến Sources > > Snippets (Nguồn > > Đoạn mã).
Trong Trình đơn lệnh:
1. Nhấn tổ hợp phím Ctrl+Shift+P (Windows/Linux) hoặc Command+Shift+P (Mac) để mở Trình đơn lệnh.
2. Bắt đầu nhập Snippets, chọn Hiện đoạn mã rồi nhấn Enter.

Ngăn Nguồn>Mã đoạn hiển thị danh sách các đoạn mã bạn đã lưu, trong ví dụ này là trống.

Ngăn Đoạn mã trống.

Tạo đoạn mã

Bạn có thể tạo đoạn mã trong ngăn Snippets (Đoạn mã) hoặc bằng cách chạy lệnh tương ứng từ Command Menu (Trình đơn lệnh) ở bất kỳ đâu trong DevTools.

Ngăn Snippets (Đoạn mã) sắp xếp các đoạn mã theo thứ tự bảng chữ cái.

Tạo đoạn mã trong bảng điều khiển Nguồn

Mở ngăn Đoạn mã.
Nhấp vào Đoạn mã mới.
Nhập tên cho đoạn mã rồi nhấn phím Enter để lưu.

Đặt tiêu điểm con trỏ vào vị trí bất kỳ trong DevTools.
Nhấn tổ hợp phím Ctrl+Shift+P (Windows/Linux) hoặc Command+Shift+P (Mac) để mở Trình đơn lệnh.
Bắt đầu nhập Snippet, chọn Create new snippet (Tạo đoạn mã mới), sau đó nhấn Enter để chạy lệnh.

Hãy xem phần Đổi tên đoạn mã nếu bạn muốn đặt tên tuỳ chỉnh cho đoạn mã mới.

Chỉnh sửa đoạn mã

Mở ngăn Đoạn mã.
Trong ngăn Snippets (Mã đoạn), hãy nhấp vào tên của đoạn mã mà bạn muốn chỉnh sửa. Bảng điều khiển Nguồn sẽ mở tệp đó trong Trình soạn thảo mã.
Sử dụng Trình soạn thảo mã để chỉnh sửa mã trong đoạn mã. Dấu hoa thị bên cạnh tên đoạn mã cho biết bạn chưa lưu nội dung thay đổi.
Nhấn tổ hợp phím Control+S (Windows/Linux) hoặc Command+S (Mac) để lưu.