ปิดโหมดไม่มีส่วนหัว
บางครั้งการดูว่าเบราว์เซอร์กำลังแสดงอะไรอยู่ก็มีประโยชน์ แทนที่จะเปิดในโหมดไม่มีส่วนหัว ให้เปิดเบราว์เซอร์เวอร์ชันเต็มโดยใช้ headless: false
:
const browser = await puppeteer.launch({ headless: false });
ลดความเร็ว
ตัวเลือก slowMo
จะทำให้การดำเนินการ Puppeteer ช้าลงถึงระดับมิลลิวินาทีที่ระบุไว้ ซึ่งเป็นอีกวิธีหนึ่งที่จะช่วยให้คุณรู้ว่าเกิดอะไรขึ้น
const browser = await puppeteer.launch({
headless: false,
slowMo: 250, // slow down by 250ms
});
บันทึกเอาต์พุตของคอนโซล
คุณสามารถรอฟังเหตุการณ์ console
วิธีนี้มีประโยชน์เมื่อแก้ไขข้อบกพร่องของโค้ดใน page.evaluate()
ดังนี้
page.on('console', (msg) => console.log('PAGE LOG:', msg.text()));
await page.evaluate(() => console.log(`url is ${location.href}`));
ใช้โปรแกรมแก้ไขข้อบกพร่องในเบราว์เซอร์โค้ดของแอปพลิเคชัน
บริบทการดำเนินการมี 2 แบบ ได้แก่ Node.js ที่เรียกใช้โค้ดทดสอบ และเบราว์เซอร์ที่เรียกใช้โค้ดแอปพลิเคชันที่กำลังทดสอบ วิธีนี้ช่วยให้คุณแก้ไขข้อบกพร่องของโค้ดในเบราว์เซอร์โค้ดแอปพลิเคชัน ซึ่งก็คือโค้ดภายใน evaluate()
ได้
ใช้ {devtools: true}
เมื่อเปิด Puppeteer
const browser = await puppeteer.launch({ devtools: true });
เปลี่ยนระยะหมดเวลาทดสอบเริ่มต้น
- jest:
jest.setTimeout(100000);
- ดอกมะลิ:
jasmine.DEFAULT_TIMEOUT_INTERVAL = 100000;
- mocha:
this.timeout(100000);
(อย่าลืมเปลี่ยน test เพื่อใช้ function ไม่ใช่ '=>')
เพิ่มคำสั่งประเมินโดยมีโปรแกรมแก้ไขข้อบกพร่องอยู่ภายใน หรือเพิ่มโปรแกรมแก้ไขข้อบกพร่องลงในคำสั่งประเมินที่มีอยู่ ดังนี้
await page.evaluate(() => {
debugger;
});
จากนั้นการทดสอบจะหยุดดำเนินการในคำสั่ง Assess ด้านบน และ Chromium จะหยุดในโหมดแก้ไขข้อบกพร่อง
ใช้โปรแกรมแก้ไขข้อบกพร่องใน Node.js
ซึ่งจะช่วยให้คุณแก้ไขข้อบกพร่องของโค้ดทดสอบได้ ตัวอย่างเช่น คุณอาจข้ามไป await page.click()
ในสคริปต์ Node.js แล้วดูการคลิกที่เกิดขึ้นในเบราว์เซอร์โค้ดแอปพลิเคชัน
คุณเรียกใช้ await page.click()
ในคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บไม่ได้เนื่องจากข้อบกพร่องของ Chromium 833928
ดังนั้น หากต้องการลองใช้ คุณจะต้องเพิ่มฟีเจอร์ดังกล่าวลงในไฟล์ทดสอบ
- เพิ่มโปรแกรมแก้ไขข้อบกพร่อง เช่น
javascript debugger; await page.click('a[target=_blank]');
- ตั้งค่าแบบไม่มีส่วนหัวเป็น "เท็จ"
- เรียกใช้โหนด
--inspect-brk
เช่นnode --inspect-brk node_modules/.bin/jest tests
- เปิด
chrome://inspect/#devices
ใน Chrome แล้วคลิกinspect
- ในเบราว์เซอร์ทดสอบที่เปิดใหม่ ให้พิมพ์
F8
เพื่อดำเนินการทดสอบต่อ - ขณะนี้โปรแกรมแก้ไขข้อบกพร่องของคุณถูกใช้งานแล้ว และคุณสามารถแก้ไขข้อบกพร่องได้ในเบราว์เซอร์ทดสอบ
เปิดใช้การบันทึกที่มีข้อมูลขนาดใหญ่
ระบบจะบันทึกการรับส่งข้อมูลของโปรโตคอลเครื่องมือสำหรับนักพัฒนาเว็บภายในด้วยโมดูลแก้ไขข้อบกพร่องภายใต้เนมสเปซของ Puppeteer
# 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'
ดีบักโค้ด Puppeteer (โหนด) ของคุณ
ใช้ ndb:
npm install -g ndb
(หรือใช้ npx)- เพิ่มโปรแกรมแก้ไขข้อบกพร่องลงในโค้ด Puppeteer (โหนด)
- เพิ่ม
ndb
(หรือnpx ndb
) ก่อนคำสั่งทดสอบ ตัวอย่างเช่นndb jest
หรือndb mocha
(หรือnpx ndb jest
/npx ndb mocha
) - แก้ไขข้อบกพร่องการทดสอบใน Chromium ให้ดีที่สุด!