Công cụ gỡ lỗi

Tắt chế độ không có giao diện người dùng

Đôi khi, việc xem nội dung trình duyệt đang hiển thị sẽ hữu ích. Thay vì khởi chạy ở chế độ không có giao diện người dùng, hãy chạy phiên bản đầy đủ của trình duyệt bằng cách sử dụng headless: false:

const browser = await puppeteer.launch({ headless: false });

Giảm tốc độ

Tuỳ chọn slowMo làm chậm các thao tác Puppeteer theo số mili giây đã chỉ định. Một cách khác để giúp bạn xem chuyện gì đang xảy ra.

const browser = await puppeteer.launch({
  headless: false,
  slowMo: 250, // slow down by 250ms
});

Ghi lại đầu ra của bảng điều khiển

Bạn có thể nghe sự kiện console. Thao tác này cũng hữu ích khi gỡ lỗi mã trong page.evaluate():

page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));

await page.evaluate(() => console.log(`url is ${location.href}`));

Sử dụng trình gỡ lỗi trong trình duyệt mã xử lý ứng dụng

Có 2 ngữ cảnh thực thi: button.js đang chạy mã kiểm thử và mã ứng dụng đang chạy trong trình duyệt đang được kiểm thử. Điều này cho phép bạn gỡ lỗi mã trong trình duyệt mã ứng dụng; mã bên trong evaluate().

Sử dụng {devtools: true} khi chạy Puppeteer

const browser = await puppeteer.launch({ devtools: true });

Thay đổi thời gian chờ kiểm thử mặc định

  • jest: jest.setTimeout(100000);
  • hoa nhài: jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
  • mocha: this.timeout(100000); (đừng quên thay đổi kiểm thử để sử dụng hàm chứ không phải '=>')

Thêm câu lệnh đánh giá có trình gỡ lỗi bên trong hoặc thêm trình gỡ lỗi vào câu lệnh đánh giá hiện có:

await page.evaluate(() => {
  debugger;
});

Sau đó, chương trình kiểm thử sẽ ngừng thực thi trong câu lệnh đánh giá ở trên và Chromium sẽ dừng ở chế độ gỡ lỗi.

Sử dụng trình gỡ lỗi trong button.js

Điều này cho phép bạn gỡ lỗi mã kiểm thử. Ví dụ: bạn có thể bước qua await page.click() trong tập lệnh button.js và xem lượt nhấp xảy ra trong trình duyệt mã ứng dụng.

Bạn không chạy được await page.click() trong bảng điều khiển Công cụ cho nhà phát triển do Lỗi Chromium 833928. Vì vậy, nếu muốn dùng thử tính năng nào đó, bạn phải thêm nội dung đó vào tệp kiểm thử.

  1. Thêm trình gỡ lỗi; vào quy trình kiểm thử của bạn, ví dụ: javascript debugger; await page.click('a[target=_blank]');
  2. Đặt giao diện người dùng không có giao diện người dùng thành false.
  3. Chạy nút --inspect-brk, ví dụ: node --inspect-brk node_modules/.bin/jest tests.
  4. Trong Chrome, hãy mở chrome://inspect/#devices rồi nhấp vào inspect.
  5. Trong trình duyệt thử nghiệm mới mở, hãy nhập F8 để tiếp tục phiên chạy thử nghiệm.
  6. Bây giờ, trình gỡ lỗi của bạn đã được nhấn và bạn có thể gỡ lỗi trong trình duyệt thử nghiệm

Bật tính năng ghi nhật ký chi tiết

Lưu lượng truy cập giao thức Công cụ cho nhà phát triển nội bộ được ghi lại bằng mô-đun gỡ lỗi trong không gian tên Pupeteer.

# Basic verbose logging
env DEBUG="puppeteer:*" node script.js

# Protocol traffic can be rather noisy. This example filters out all Network
# domain messages
env DEBUG="puppeteer:*" env DEBUG_COLORS=true node script.js 2>&1 | grep -v '"Network'

Gỡ lỗi mã Puppeteer (nút)

Dùng ndb:

  • npm install -g ndb (hoặc sử dụng npx).
  • Thêm trình gỡ lỗi vào mã (nút) Puppeteer của bạn.
  • Thêm ndb (hoặc npx ndb) trước lệnh kiểm thử. Ví dụ: ndb jest hoặc ndb mocha (hoặc npx ndb jest / npx ndb mocha).
  • gỡ lỗi kiểm thử của bạn bên trong Chromium như một ông chủ!