เคล็ดลับการแก้ไขข้อบกพร่อง Chrome 11 ข้อที่สามารถปรับปรุงประสิทธิภาพได้

ในฐานะ老婆ของรองเท้าเด็กส่วนหน้า ฉันเชื่อว่าคุณต้องคุ้นเคยกับเบราว์เซอร์ Chrome调页面写BUG画样式และ看php片โลกทั้งใบคงไร้ประโยชน์หากไม่มีสิ่งนี้

ไม่เชื่อเหรอ? มาดูกันว่า老婆ของเรามีพลังแค่ไหน...

1# การเริ่มต้นคำขอใหม่ด้วยคลิกเดียว

เมื่อร่วมกันแก้ไขจุดบกพร่องส่วนหลังหรือแก้ไขปัญหาออนไลน์ คุณมักจะได้ยินพวกเขาพูดประโยคนี้: คุณลองส่งคำขออีกครั้ง ขอฉันดูหน่อยว่าทำไมถึงเกิดข้อผิดพลาด!

มีวิธีง่ายๆ ที่น่าขันในการส่งคำขออีกครั้ง

• เลือก Network

• คลิก Fetch/XHR

• เลือกคำขอที่จะส่งอีกครั้ง

• คลิกขวาและเลือก Replay XHR

ไม่จำเป็นต้องรีเฟรชหน้าหรือโต้ตอบกับหน้า มันเจ๋งมากใช่ไหม? - -

2# ใน

สถานการณ์สมมติของการเริ่มต้นคำขออย่างรวดเร็วในคอนโซลหรือการดีบักร่วมหรือการแก้ไขข้อบกพร่อง สำหรับคำขอเดียวกัน บางครั้งจำเป็นต้อง แก้ไขพารามิเตอร์อินพุต และเริ่มต้นใหม่อีกครั้ง

• เลือก Network

• คลิก Fetch/XHR

• เลือก Copy as fetch

• คอนโซลดึงข้อมูล วางโค้ด

• เพื่อแก้ไขพารามิเตอร์ แล้วกด Enter เพื่อเสร็จสิ้น

ในอดีต ฉันมักจะจัดการกับมันโดยการเปลี่ยนโค้ดหรือเขียน fetch ด้วยมือ มันโง่มากที่ต้องคิดเกี่ยวกับมัน...

3#

หากโค้ดของคุณถูกคำนวณ มันจะส่งออก อ็อบเจ็กต์ที่ซับซ้อน และจำเป็นต้องคัดลอกและส่งให้ผู้อื่น ฉันควรทำอย่างไร?

• ใช้ฟังก์ชัน copy เพื่อดำเนินการ对象เป็นพารามิเตอร์อินพุต

ในอดีต ฉันมักจะพิมพ์มันไปยังคอนโซลผ่าน JSON.stringify(fetfishObj, null, 2) จากนั้นคัดลอกและวางด้วยตนเอง ซึ่งไม่มีประสิทธิภาพจริงๆ...

4# คอนโซลได้รับองค์ประกอบที่เลือกในองค์ประกอบ แผง

เมื่อแก้ไขข้อบกพร่องของหน้าเว็บ หลังจากเลือกองค์ประกอบในแผง Elements แล้ว ถ้าคุณต้องการทราบคุณลักษณะบางอย่าง เช่น宽,高,位置ฯลฯ ผ่าน JS ล่ะ

• เลือกองค์ประกอบที่จะดีบั๊กผ่าน Elements

• และเข้าถึงคอนโซลโดยตรงด้วย $0

5# การจับภาพหน้าจอแบบเต็มหน้าจอ

บางครั้งเราจะต้อง จับ ภาพหน้าจอของหน้าเว็บหนึ่งหน้าจอก็ได้ หน้าจอเดียว จะทำอย่างไร ?

• เตรียมเนื้อหาที่ต้องดำเนินการ

• cmd + shift + p ดำเนินการคำสั่ง Command

• และป้อน Capture full size screenshot แล้วกด Enter

จะทำอย่างไรถ้าคุณต้องการสกัดกั้นองค์ประกอบที่เลือกบางส่วน?

คำตอบนั้นง่ายมาก ในขั้นตอนที่สาม ให้ป้อน Capture node screenshot

6# ขยายองค์ประกอบ DOM ทั้งหมดด้วยการคลิกเพียงครั้งเดียว

เมื่อแก้ไขข้อบกพร่อง คุณมักจะขยายองค์ประกอบทีละรายการเพื่อแก้ไขข้อบกพร่องเมื่อระดับค่อนข้างลึกหรือไม่ มีวิธีที่เร็วกว่า

• ในการกดปุ่ม opt ค้างไว้ + คลิก (องค์ประกอบด้านนอกสุดที่ต้องขยาย)

7# คอนโซลอ้างอิงถึงผลลัพธ์ของการดำเนินการครั้งล่าสุด

เพื่อดูสถานการณ์นี้ ฉันเดาว่าคุณต้องเจอกับมันมาแล้ว เราควรทำอย่างไร? -

'fatfish'.split('').reverse().join('') // hsiftaf

คุณอาจจะทำเช่นนี้

// ขั้นตอนที่ 1 'fatfish'.split('') // ['f', 'a ', 't', 'f', 'ฉัน', 's', 'h']
// ขั้นตอนที่ 2 ['f', 'a', 't', 'f', 'i', 's', 'h'].reverse() // ['h', 's', ' i ', 'f', 't', 'a', 'f']
// ขั้นตอนที่ 3 ['h', 's', 'i', 'f', 't', 'a', 'f'].join('') // hsiftaf

วิธีที่ง่ายกว่าคือ

ใช้ $_ เพื่ออ้างอิงผลลัพธ์ของการดำเนินการก่อนหน้านี้โดยไม่ต้องคัดลอกทุกครั้ง

// ขั้นตอนที่ 1 'fatfish'.split('') // ['f', 'a', 't', ' ปลา']
// ขั้นตอนที่ 2 $_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
// ขั้นตอนที่ 3 $_.join('') // hsiftaf

8.# สลับธีมอย่างรวดเร็ว

นักเรียนบางคนชอบธีมสีขาวของ Chrome และบางคนชอบสีดำ เราสามารถใช้ปุ่มลัดเพื่อสลับระหว่างทั้งสองธีมได้อย่างรวดเร็ว

• cmd + shift + p ดำเนินการคำสั่ง Command

• และป้อน Switch to dark theme หรือ Switch to light theme เพื่อเปลี่ยนธีม

9.# " $ " และ " $$ "

เป็นข้อกำหนดทั่วไปในการใช้ document.querySelector และ document.querySelectorAll บนคอนโซลเพื่อเลือกองค์ประกอบของหน้าปัจจุบัน แต่จริงๆ แล้วมันยาวเกินไปเล็กน้อย เราสามารถใช้ $ ได้ และ $$ ทดแทน

10.# $i ติดตั้งแพ็คเกจ npm โดยตรงในคอนโซล

คุณเคยประสบปัญหานี้หรือไม่? บางครั้งฉันต้องการใช้ API เช่น dayjs หรือ lodash แต่ฉันไม่ต้องการไปที่เว็บไซต์อย่างเป็นทางการเพื่อตรวจสอบ คงจะดีไม่น้อยหากฉันสามารถลองใช้บนคอนโซลได้โดยตรง

Console Importer เป็นปลั๊กอินที่ใช้ในการติดตั้งแพ็คเกจ npm ในคอนโซลโดยตรง

• ติดตั้งปลั๊กอิน Console Importer

• $i('name') เพื่อติดตั้งแพ็กเกจ npm

11.# เพิ่มเบรกพอยต์แบบมีเงื่อนไข การใช้เบรกพอยต์แบบมีเงื่อนไขที่ยอดเยี่ยม

สมมติว่ามีโค้ดต่อไปนี้ เราหวังว่าเบรกพอยต์จะถูกทริกเกอร์เมื่อชื่อของอาหารคือ ? เราจะทำได้อย่างไร?

อาหารคอนสตรัค = [
  -
    ชื่อ: '?',
    ราคา: 10
  -
  -
    ชื่อ: '?',
    ราคา: 15
  -
  -
    ชื่อ: '?',
    ราคา: 20
  -
-

อาหาร forEach((v) => {
  console.log (v.name, v.price)
})

สะดวกมากเมื่อใช้ข้อมูลจำนวนมาก และต้องการทำลายเงื่อนไขเมื่อตรงตามเงื่อนไขเท่านั้น ลองจินตนาการดูว่าถ้าไม่มีจุดพักแบบมีเงื่อนไข เราจำเป็นต้องคลิกดีบักเกอร์ n ครั้งหรือไม่

(การเรียนรู้การแบ่งปันวิดีโอ: การพัฒนาเว็บส่วนหน้า วิดีโอพื้นฐานการเขียนโปรแกรม)

ข้างต้นคือรายละเอียดของทักษะการดีบัก Chrome 11 ประการที่สามารถปรับปรุงประสิทธิภาพได้ หากต้องการข้อมูลเพิ่มเติม โปรดอ่านบทความอื่น ๆ ที่เกี่ยวข้องบนเว็บไซต์ PHP Chinese!