Chạy đoạn mã JavaScript

Sofia Emelianova
Sofia Emelianova

Nếu bạn thấy mình chạy cùng một mã trong Bảng điều khiển nhiều lần, hãy cân nhắc việc lưu mã đó dưới dạng đoạn mã. Đoạn mã có quyền truy cập vào ngữ cảnh JavaScript của trang. Chúng là giải pháp thay thế cho dấu trang.

Bạn có thể tạo các đoạn trích trong bảng điều khiển Nguồn rồi chạy các đoạn trích đó trên trang bất kỳ cũng như ở 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 Công cụ cho nhà phát triển ở bên trái và một số mã nguồn đoạn mã trong ngăn Nguồn > Đoạn mã ở bên phải.

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

Dưới đây là đoạn mã nguồn ghi lại một số thông báo và thay thế phần 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 Chạy. Chạy, ngăn 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 Đoạn trích liệt kê các đoạn mã của bạn. Để chỉnh sửa đoạn mã, hãy mở đoạn mã đó theo một trong hai cách:

  1. Chuyển đến Nguồn > Thẻ khác. > Đoạn mã.

    Trình đơn Thẻ khác trên ngăn Nguồn.

  2. Trên Trình đơn lệnh:

    1. Nhấn Control+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 thị đoạn trích rồi nhấn Enter.

    Chọn Hiện đoạn trích từ trình đơn Lệnh.

Ngăn Nguồn>Đoạn mã hiển thị danh sách các đoạn mã bạn đã lưu (trong ví dụ này là đoạn mã 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 Đoạn mã hoặc bằng cách chạy lệnh tương ứng từ Trình đơn lệnh ở bất kỳ đâu trong Công cụ cho nhà phát triển.

Ngăn Đoạn trích sắp xếp các đoạn trích của bạn theo thứ tự bảng chữ cái.

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

  1. Mở ngăn Đoạn trích.
  2. Nhấp vào Đoạn mã mới. Đoạn mã mới.
  3. Nhập tên cho đoạn mã và nhấn Enter để lưu.

    Đặt tên cho một đoạn thông tin.

Tạo đoạn mã từ Trình đơn Lệnh

  1. Tập trung con trỏ vào vị trí bất kỳ bên trong Công cụ cho nhà phát triển.
  2. Nhấn Control+Shift+P (Windows/Linux) hoặc Command+Shift+P (Mac) để mở Trình đơn lệnh.
  3. Bắt đầu nhập Snippet, chọn Tạo đoạn mã mới, sau đó nhấn Enter để chạy lệnh.

    Chọn Tạo đoạn mã mới trong trình đơn Lệnh.

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

Chỉnh sửa đoạn trích

  1. Mở ngăn Đoạn trích.
  2. Trong ngăn Đoạn mã, hãy nhấp vào tên của đoạn mã bạn muốn chỉnh sửa. Bảng điều khiển Sources (Nguồn) sẽ mở ra trong Code Editor (Trình soạn thảo mã).

    Đã mở một đoạn mã trong Trình soạn thảo mã.

  3. Sử dụng Trình soạn thảo mã để chỉnh sửa mã trong đoạn mã của bạn. Dấu hoa thị bên cạnh tên đoạn mã có nghĩa là bạn chưa lưu các thay đổi của mình.

    Một dấu hoa thị bên cạnh tên đoạn mã cho biết mã chưa được lưu.

  4. Nhấn tổ hợp phím Control+S (Windows/Linux) hoặc Command+S (Mac) để lưu.

Chạy đoạn mã

Tương tự như việc tạo đoạn mã, bạn có thể chạy đoạn mã đó trong cả ngăn Đoạn mã và từ Trình đơn lệnh.

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

  1. Mở ngăn Đoạn trích.
  2. Nhấp vào tên của đoạn mã bạn muốn chạy. Bảng điều khiển Sources (Nguồn) sẽ mở ra trong Code Editor (Trình soạn thảo mã).
  3. Nhấp vào Chạy. Run (Chạy) trong thanh thao tác ở cuối trình chỉnh sửa, hoặc nhấn tổ hợp phím Control+Enter (Windows/Linux) hoặc Command+Enter (Mac).

    Nút Run (Chạy).

Chạy một đoạn mã từ Trình đơn lệnh

  1. Tập trung con trỏ vào vị trí bất kỳ bên trong Công cụ cho nhà phát triển.
  2. Nhấn tổ hợp phím Control+O (Windows/Linux) hoặc Command+O (Mac) để mở Trình đơn Command.
  3. Nhập ký tự !, theo sau là tên đoạn mã bạn muốn chạy.

    Chạy một đoạn mã từ trình đơn Mở.

  4. Nhấn Enter để chạy đoạn mã.

Đổi tên đoạn mã

  1. Mở ngăn Đoạn trích.
  2. Nhấp chuột phải vào tên đoạn mã rồi chọn Đổi tên.

Xoá đoạn trích

  1. Mở ngăn Đoạn trích.
  2. Nhấp chuột phải vào tên đoạn thông tin rồi chọn Xoá.