8 ฟีเจอร์ที่รู้จักกันน้อยแต่เป็น KILLER ของ Chrome DevTools

Chrome DevTools เป็นหนึ่งในเหตุผลหลักที่นักพัฒนาปฏิเสธที่จะแตะต้องเบราว์เซอร์อื่นๆ

แต่พวกเราส่วนใหญ่ใช้ฟีเจอร์เพียงไม่กี่ตัวเท่านั้น ที่เหลือแทบไม่สนใจฟีเจอร์ที่น่าเหลือเชื่ออีกมากมายที่ถูกปล่อยออกมาอย่างเงียบ ๆ

มาค้นพบอัญมณีที่ซ่อนอยู่เหล่านี้กันเถอะ!

ทุกคนมีระบบปฏิบัติการที่ชื่นชอบ แพลตฟอร์มฮาร์ดแวร์ ประเภทอุปกรณ์ ฟอร์มแฟคเตอร์ของอุปกรณ์ ฯลฯ แต่สิ่งหนึ่งที่เหมือนกันสำหรับทุกคนคือพวกเขาใช้เบราว์เซอร์ Chrome และเบราว์เซอร์ Chrome เท่านั้น! ฉันคิดว่ามันปลอดภัยที่จะบอกว่าสงครามเบราว์เซอร์สิ้นสุดลงแล้ว และ Chrome ก็ได้รับชัยชนะอย่างน่าเชื่อ

ผู้ใช้ Windows ใช้เบราว์เซอร์เริ่มต้นเพื่อดาวน์โหลด Chrome เท่านั้น จากนั้นจึงใช้ Chrome โดยไม่สนใจ “คำแนะนำ” ทั้งหมดจาก Windows เช่นเดียวกับอุปกรณ์ของ Apple (โดยเฉพาะ MacBooks และอุปกรณ์หน้าจอขนาดใหญ่) ที่ผู้ใช้และนักพัฒนาซอฟต์แวร์หลีกเลี่ยง Safari แม้ว่า Apple จะมีคำกล่าวอ้างและกลวิธีในการแปลงที่แข็งแกร่งมากมาย

และหากอุปกรณ์ไม่ได้ใช้งาน Chrome มีโอกาสสูงที่อุปกรณ์นั้นจะใช้สปินออฟที่เข้ากันได้กับ Chrome เช่น กล้าหาญ หรือ วิวาลดี. ใช่ ฉันรู้ว่าในทางเทคนิคแล้ว เบราว์เซอร์เหล่านี้ไม่ได้ใช้ Chrome แต่นั่นก็เป็นการสนทนากันอีกเรื่องหนึ่ง ผู้ใช้ทั่วไปอาจใช้เบราว์เซอร์อื่นๆ เหล่านี้ด้วยเหตุผลเชิงอุดมคติหรือเหตุผลพิเศษ แต่เมื่อพูดถึงนักพัฒนาแล้ว ไม่มีเบราว์เซอร์อื่นใดให้เห็นนอกจาก Chrome

แม้แต่ความจริงที่ว่ามันเป็นสัตว์ประหลาดที่กินความทรงจำก็ยังถูกเพิกเฉย เหตุผลนั้นง่าย: Chrome DevTools.

แหล่งที่มาของรูปภาพ: เอกสาร Chrome DevTools อย่างเป็นทางการ

ตอนนี้ หากคุณกำลังอ่านบทความนี้ สันนิษฐานได้อย่างปลอดภัยว่าคุณเป็นผู้ใช้ระดับสูง คนจรจัด นักพัฒนาเว็บ หรือบางอย่างที่สอดคล้องกัน ด้วยเหตุนี้ เราจึงไม่ต้องการคำแนะนำเบื้องต้นเกี่ยวกับ DevTools วิธีเปิด คุณลักษณะต่างๆ ของมัน ฯลฯ

โดยไม่เป็นการเสียเวลา เรามาเจาะลึกคุณลักษณะบางอย่างที่รู้จักกันน้อยแต่มีประโยชน์อย่างน่าอัศจรรย์ของ Chrome DevTools กันดีกว่า

โหมดการออกแบบ

สิ่งหนึ่งที่นักพัฒนาทำเป็นประจำคือตรวจสอบองค์ประกอบบนหน้า จากนั้นแก้ไข HTML เพื่อดูตัวอย่างบางอย่างหรือทดสอบผลกระทบของการเปลี่ยนแปลง

อย่างไรก็ตาม การทำงานกับ HTML โดยตรงใน DevTools ไม่ใช่สิ่งที่ราบรื่นที่สุดเท่าที่เคยมีมา — ลุยผ่านซุปแท็ก เพ่งสายตาของคุณพยายามหาวงเล็บเปิด/ปิดที่เหมาะสม และจัดการกับช่องว่างจำนวนไร้สาระขณะแก้ไขข้อความ (ช่องว่างที่ หายไปอย่างชัดเจนจากเอกสารที่คุณเห็น) เป็นปัญหาบางอย่างที่คุณต้องจัดการ จะยิ่งแย่ไปกว่านี้หากคุณเป็นนักออกแบบและไม่ต้องการกลั่นกรองความยุ่งเหยิง

นี่คือภาพหน้าจอจากหน้าใดหน้าหนึ่งของเว็บไซต์นี้ (admintrick.com):

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

แต่มีคุณลักษณะ DevTools ที่เรียกว่า Design Mode ซึ่งสามารถลดความเจ็บปวดได้ในหลายกรณี การใช้ Design Mode (นั่นไม่ใช่ชื่ออย่างเป็นทางการ แต่เป็นเพียงชื่อที่ผู้คนตั้งชื่อตามวิธีการเปิดใช้งานและสิ่งที่ทำ — ไม่ต้องกังวล เราจะได้เห็นในเร็วๆ นี้!) การเปลี่ยนแปลงของ เพจสามารถสร้างเป็นภาพและแสดงสดได้ เช่นเดียวกับการแก้ไขสเปรดชีตหรือโปรแกรมแก้ไขข้อความ! สิ่งเดียวที่จับได้คือฟีเจอร์นี้ไม่ได้เปิดใช้งานโดยค่าเริ่มต้น และการเปิดใช้งานก็ค่อนข้างปวดหัว โดยเฉพาะอย่างยิ่งสำหรับผู้ที่ไม่ใช่นักพัฒนา

ไม่ว่าในกรณีใด การทำเช่นนั้นค่อนข้างง่าย สิ่งที่คุณต้องทำคือทำตามคำแนะนำด้านล่าง ขึ้นอยู่กับตำแหน่งที่คุณนั่งบนกราฟความซับซ้อนของผู้ใช้ สิ่งนี้อาจง่ายจนน่าขันหรือยากปานกลาง นี่คือสิ่งที่ต้องทำ:

  • ตรวจสอบให้แน่ใจว่าได้โหลดหน้าเว็บที่คุณต้องการแก้ไขแล้ว และคุณกำลังดูอยู่ (นั่นคือ แท็บที่เป็นปัญหานั้นเป็นแท็บที่ใช้งานอยู่)
  • เปิดแผง DevTools ตามปกติ (แป้นพิมพ์ลัด การคลิกเมาส์ อะไรก็ได้) ฉันชอบใช้แป้นพิมพ์ลัด และบน Mac Opt + Cmd + ฉันจัดการเอง
  • ตอนนี้ เมื่อเปิด DevTools แล้ว ให้ไปที่แท็บชื่อ “คอนโซล” พวกคุณบางคนอาจจะกลอกตาด้วยความงี่เง่าและเห็นได้ชัดว่าทั้งหมดนี้ดูเหมือน แต่เดี๋ยวก่อน ลองนึกถึงคน (หลายร้อยคน) ที่นั่นที่มีปัญหาในขณะที่ทำงานกับคอนโซลเบราว์เซอร์และ JavaScript (ไม่ว่าจะด้วยเหตุผลใดก็ตาม ).
  • คลิกที่บรรทัดแรกถัดจากเคอร์เซอร์ ซึ่งจะแสดงข้อความแจ้งการพิมพ์ และตอนนี้คุณสามารถเขียนโค้ด JavaScript ที่นั่นได้ (ดูภาพหน้าจอเพิ่มเติมด้านล่างเล็กน้อย)
  • ตอนนี้เราต้องเขียนโค้ด JavaScript ไม่ต้องกังวล เพราะสิ่งที่คุณต้องเขียน/พิมพ์นั้นสั้นและตรงไปตรงมามาก: document.designMode = “on” คุณยังสามารถคัดลอกและวางโค้ดจากหน้านี้ (หากทำได้ ตรวจสอบให้แน่ใจว่าไม่ได้คัดลอกการจัดรูปแบบ — เราต้องการเฉพาะข้อความธรรมดา) หรือหากคุณรู้สึกมั่นใจ ให้พิมพ์ออกมา
  • กด Enter/Return
  วิธีใช้ adblock บน YouTube [Chrome]

“แค่นั้นแหละ??!”

ใช่ นั่นคือทั้งหมด!

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

ฟีเจอร์ Design Mode ที่น่าตื่นเต้นนั้นไม่ใช่สัญลักษณ์แสดงหัวข้อย่อย คุณไม่สามารถคัดลอก-วางปุ่ม เปลี่ยนรูปลักษณ์ และอื่นๆ ได้ง่ายๆ จำนวนสิ่งที่สามารถทำได้จริงเมื่อเทียบกับโปรแกรมแก้ไขหน้าเว็บภาพในฝันนั้นต่ำมาก อย่างไรก็ตาม มันช่วยแก้ปัญหากรณีการใช้งานที่ต้องเปลี่ยนเนื้อหาด้วยภาพและทันทีทันใด

ที่กล่าวว่าไม่ใช่เรื่องไกลตัวที่จะอ้างว่าคนใน Chrome กำลังทดสอบว่าคุณลักษณะนี้ได้รับการตอบรับดีเพียงใด หากพบการรับสัญญาณที่ดีและกรณีการใช้งานที่แข็งแกร่ง ก็สมเหตุสมผลที่จะคาดหวังว่าความสามารถในการแก้ไขที่ทรงพลังกว่านี้จะตามมาในไม่ช้า! 🤞🏻🤞🏻

สภาพเครือข่ายจำลอง

แท็บเครือข่ายใน Chrome DevTools อาจเป็นแท็บที่ใช้กันอย่างแพร่หลายที่สุด (แน่นอนว่าฉันไม่มีข้อมูลเกี่ยวกับมัน แต่ในฐานะนักพัฒนาเว็บ ฉันมักจะใช้แท็บคอนโซลประมาณ 20-30% ของเวลาทั้งหมด และ แท็บเครือข่ายตลอดเวลาที่เหลือ) ซึ่งจะให้ข้อมูลทุกประเภทเกี่ยวกับคำขอที่สร้างจากหน้าเว็บ ประเภท ข้อมูลเมตา/ส่วนหัว สถานะ ความคืบหน้าในการดาวน์โหลดเนื้อหา (รูปภาพ สไตล์ชีต ฯลฯ) เวลาในการโหลด และอื่นๆ ด้วยประโยชน์อันน่าทึ่งนี้ จึงไม่น่าแปลกใจเลยว่าทำไมแท็บเครือข่ายจึงเป็นที่นิยมมากที่สุด

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

หากคุณคลิกที่นี่ คุณจะเห็นดรอปดาวน์พร้อมตัวเลือกต่างๆ ที่ให้คุณเร่งความเร็วเครือข่าย: 3G เร็ว, 3G ช้า, ออฟไลน์ ฯลฯ แม้ว่าจะมีกรณีการใช้งานที่หลากหลายสำหรับตัวเลือกนี้ แต่ที่พบมากที่สุดคือเพื่อทดสอบเว็บไซต์ ประสิทธิภาพบนเครือข่ายที่ช้าหรือพฤติกรรมของเว็บแอปเมื่อออฟไลน์ (สมมติว่าเพิ่มความสามารถดังกล่าว)

ลองมาดูเรื่องนี้กัน ฉันจะตั้งค่าเครือข่ายเป็น “3G ช้า” และโหลดหน้าเดิมจากภาพหน้าจอก่อนหน้าซ้ำ ก่อนที่ฉันจะทำเช่นนั้น ให้สังเกตในภาพหน้าจอก่อนหน้าว่าการเชื่อมต่อเครือข่ายปัจจุบันของฉัน (บรอดแบนด์ 40 Mbps) เป็นอย่างไร สินทรัพย์ส่วนใหญ่จะถูกดาวน์โหลดภายในเวลาไม่ถึง 100 มิลลิวินาที

และตอนนี้ ได้เวลาดูว่า 3G ที่ช้าทำอะไรได้บ้าง

ช่างแตกต่าง!

ขอให้สังเกตว่าเวลาในการโหลดเนื้อหาอยู่ในช่วง 5-10 วินาที นอกจากนี้เว็บไซต์โหลดเสร็จภายใน 17.25 วินาที! ใช่ ฉันรู้ว่าคุณกำลังคิดอะไรอยู่ แต่คุณต้องพิจารณาว่าในเครือข่าย 3G ที่ช้า เว็บไซต์สมัยใหม่จะใช้เวลาหลายวินาทีในการโหลด ไม่ว่าคุณจะต้องการโหลดเร็วบนเครือข่ายที่ช้าเป็นอีกสิ่งหนึ่งหรือไม่ แต่โดยรวมแล้วมันต้องเป็นการตัดสินใจทางธุรกิจที่ผลประโยชน์จะพิสูจน์ความพยายาม

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

ตัวเลือกสีแบบโต้ตอบ

การตรวจสอบองค์ประกอบ DOM ใน DevTools เป็นสิ่งที่เราทุกคนทำกันแทบทุกวัน นอกจากนี้ เรายังคุ้นเคยกับส่วนรายละเอียด CSS ที่แสดงอยู่ข้างๆ และเราทราบดีว่าเราสามารถแก้ไขและดูผลลัพธ์ได้ทันที

สิ่งอำนวยความสะดวกเล็ก ๆ น้อย ๆ ที่ซ่อนอยู่ท่ามกลางทั้งหมดนี้ก็คือ หากคุณคลิกที่คุณสมบัติสี CSS อินเทอร์เฟซตัวเลือกสีที่คุ้นเคยจะปรากฏขึ้น!

สังเกตว่าไม่ใช่ตัวเลือกสีพื้นฐานแบบเปล่าๆ ช่วยให้คุณควบคุมความโปร่งใส เปลี่ยนระบบสีที่ใช้ เลือกสีโดยตรงจากหน้า และอื่นๆ อีกมากมาย

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

ตรวจสอบเหตุการณ์ในหน้าองค์ประกอบ

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

โชคดีที่ Chrome DevTools มีคุณลักษณะที่ดีสำหรับสิ่งนี้ จะสังเกตองค์ประกอบที่ระบุสำหรับคุณและบันทึกเหตุการณ์ไปยังคอนโซล แต่มีข้อเสียเล็กน้อย: คุณลักษณะนี้ไม่มีความสามารถในการเลือกองค์ประกอบตามชื่อคลาส CSS ดังนั้น วิธี jQuery ของ $(“#email”) จึงไม่สามารถใช้ได้ 🙂

  วิธีเพิ่มทางลัดไปยังหน้าแรกของ Google Chrome

จากที่กล่าวมาเรามาดูวิธีการทำงาน เราเริ่มต้นด้วยการ “ตรวจสอบองค์ประกอบ” ง่ายๆ โดยใช้ตัวตรวจสอบ DevTools ใช่ เป็นเครื่องมือตรวจสอบแบบเดียวกับที่เราใช้ทุกวัน

ในภาพหน้าจอด้านล่าง ฉันได้ใช้เครื่องมือตัวตรวจสอบเพื่อเน้นการป้อนข้อความ โดย “ไฮไลท์” ฉันไม่ได้หมายความว่าองค์ประกอบบนหน้าถูกเน้น (ไม่ใช่อย่างที่คุณเห็น) แต่มีการคลิกเคอร์เซอร์ตัวตรวจสอบในการป้อนข้อความ และมีการเน้นโค้ด HTML ที่สอดคล้องกันใน DevTools

การทำเช่นนี้กำหนดเป้าหมายองค์ประกอบที่ตรวจสอบในปัจจุบันสำหรับการตรวจสอบเหตุการณ์ ซึ่งทำให้องค์ประกอบสามารถเข้าถึงได้เป็นตัวแปร JavaScript พิเศษที่เรียกว่า $0 ต่อไป ตรวจสอบให้แน่ใจว่าฉันไม่ได้คลิกที่ส่วนอื่นของหน้าต่างเบราว์เซอร์โดยประมาท (โดยเฉพาะส่วนรหัส HTML) ฉันคลิกที่คอนโซลและแนบตัวฟังเหตุการณ์สำหรับการป้อนข้อความนี้ สำหรับสิ่งนี้ สิ่งที่ฉันต้องการคือโค้ดบรรทัดเดียว: monitorEvents($0, ‘mouse’) ส่วน “เมาส์” ที่นี่บอก Chrome ว่าฉันสนใจดูเหตุการณ์ที่ใช้เมาส์เท่านั้น

ทันทีที่ฉันกด Enter/Return การตรวจสอบจะเปิดใช้งาน และถ้าตอนนี้ฉันวางเมาส์เหนือหรือคลิกที่ข้อความป้อน เหตุการณ์เหล่านั้นจะถูกบันทึกไปยังคอนโซลเป็นวัตถุ JavaScript:

ดังที่คุณเห็นในภาพหน้าจอ กิจกรรมของเมาส์หลายประเภทถูกจับเมื่อฉันคลิกที่องค์ประกอบ พิมพ์ชื่อของฉัน จากนั้นเลื่อนเมาส์ออกไป (เหตุการณ์การพิมพ์ ซึ่งเป็นเหตุการณ์แป้นพิมพ์ ไม่ได้ถูกบันทึก) เหตุการณ์เป็นวัตถุ JavaScript ดังที่เห็นได้ชัดเจนจากภาพหน้าจอ แต่ละวัตถุเหตุการณ์มีข้อมูลจำนวนมหาศาล ตัวอย่างเช่น ฉันขยายอ็อบเจกต์เหตุการณ์ “คลิก” และจำนวนของพร็อพเพอร์ตี้ไม่สามารถใส่ได้ทั้งหมดในภาพหน้าจอเดียว!

ฉันขอแนะนำให้คุณลองใช้ฟีเจอร์นี้ทันที เพราะมันจะช่วยให้คุณไม่ต้องปวดหัวกับโปรเจกต์ที่กำลังจะมาถึงอย่างแน่นอน!

รายงานประสิทธิภาพของเว็บไซต์

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

คุณต้องจ้างทีมผู้เชี่ยวชาญและอดทนรอสองสามวันหรือไม่?

มีบางกรณีที่จำเป็นต้องทำ แต่ต้องขอบคุณ Chrome DevTools ที่ช่วยเหลือพวกเราที่เหลือ ใน Chrome เวอร์ชันล่าสุด (ปลายปี 2020) คุณจะพบแท็บ Lighthouse ใน DevTools เมื่อไม่กี่เดือนก่อน มันถูกเรียกว่า Audits และมันก็น่าสับสนพอสมควร นั่นคือชื่อที่คุณจะพบในเอกสารที่เป็นทางการในขณะที่เขียน อย่างไรก็ตาม ประเด็นคือ Lighthouse เคยเป็นเว็บไซต์ยอดนิยมสำหรับตรวจสอบประสิทธิภาพของเว็บไซต์ฟรี แต่ Google เลิกใช้ (ไม่มีเหตุผล) โชคดีที่ฟังก์ชันการทำงานอันทรงพลังแบบเดียวกันนี้ปรากฏขึ้นอีกครั้งในภายหลังใน DevTools

หากต้องการสร้างรายงานประสิทธิภาพ สิ่งที่คุณต้องทำคือกดปุ่มเพียงปุ่มเดียวหลังจากที่โหลดหน้าที่คุณสนใจแล้ว:

ดังที่คุณเห็นทางด้านขวาของภาพหน้าจอ มีตัวเลือกสองสามตัวเพื่อควบคุมปริมาณข้อมูลที่คุณต้องการ (และแน่นอนว่าคุณต้องการทดสอบอะไร) เมื่อคุณพอใจกับการตั้งค่าแล้ว ให้กดปุ่มสีน้ำเงินขนาดใหญ่ นั่งลงและผ่อนคลาย ไม่กี่วินาทีต่อมา คุณก็จะได้รายงานที่เป็นประโยชน์ที่มีลักษณะดังนี้:

ตัวเลขที่คุณเห็นในภาพด้านบนแสดงคะแนนรวมสำหรับแต่ละหมวดหมู่ หมวดหมู่สำหรับ Progressive Web Apps (PWA) เป็นสีเทา อาจเป็นเพราะเว็บไซต์นี้ไม่มีความสามารถของ PWA นอกจากนี้ อย่างที่คุณสามารถบอกได้จากขนาดแถบเลื่อนในภาพหน้าจอ (ทางด้านขวาสุด) เป็นรายงานที่ยาว

นี่คือลักษณะของส่วนประสิทธิภาพ:

ฉันจะไม่อ้างว่า Lighthouse และคำแนะนำของ Lighthouse เป็นจอกศักดิ์สิทธิ์ของประสิทธิภาพของเว็บไซต์ แต่สิ่งเหล่านี้มีประโยชน์อย่างยิ่ง นั่นเป็นเพราะเจ้าของเว็บไซต์และนักพัฒนาซอฟต์แวร์ไม่ค่อยรู้ว่ามีปัญหาอะไรอยู่และจะแก้ไขอย่างไร

พูดตามตรง ฉันรู้สึกสูญเสียในฐานะนักพัฒนาเว็บ เนื่องจากประสิทธิภาพและการทดสอบมักจะเป็นความเชี่ยวชาญเฉพาะทาง ด้วยเหตุนี้ Lighthouse จึงเป็นเครื่องมือที่ไม่ค่อยมีใครรู้จักและไม่ค่อยได้รับการชื่นชม ซึ่งปัจจุบันเป็นส่วนหนึ่งของ Chrome DevTools ซึ่งมีประโยชน์อย่างมากสำหรับเจ้าของธุรกิจและนักพัฒนาซอฟต์แวร์/ผู้ดูแลระบบ

ความสามารถในการแก้ไขโค้ด

แท็บ Sources ใน DevTools ช่วยให้เราเข้าถึงไฟล์ต่างๆ ที่โหลดโดยเว็บไซต์ นอกจากนี้ยังมีความสามารถต่างๆ เช่น การแก้ไขโค้ด การบันทึกข้อมูลโค้ด และอื่นๆ ซึ่งไม่น่าแปลกใจเลยสำหรับนักพัฒนาเว็บ อย่างไรก็ตาม DevTools ยังมีสิ่งอำนวยความสะดวกบางอย่างในตัวที่ทำให้ชีวิตง่ายขึ้นสำหรับนักพัฒนาที่ใช้ IDE โค้ดที่พวกเขาชื่นชอบ

DevTools ใช้แป้นพิมพ์ลัดที่รู้จักกันดีซึ่งจะช่วยประหยัดเวลาและลดความยุ่งยากในการโต้แย้งโค้ด ตัวอย่างเช่น สามารถใช้ Ctrl + D (หรือ Cmd + D บน Mac) เพื่อเน้นคำที่เกิดขึ้นหลายครั้ง ในทำนองเดียวกัน การกด Ctrl (หรือ Cmd บน Mac) ค้างไว้แล้วคลิกหลายๆ ที่ในโค้ดจะทำให้มีเคอร์เซอร์หลายตัว ดูวิดีโอด้านล่างเพื่อรับแนวคิดที่ดีขึ้น:

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

  วิธีบันทึกวิดีโอเบราว์เซอร์ Chrome ของคุณ

ควบคุมสถานะองค์ประกอบ DOM

บางครั้งเรากำลังทดสอบหรือแก้จุดบกพร่องบางอย่าง แต่ลักษณะการทำงานที่เรากำลังไล่ตามนั้นมีให้ใช้งานในสถานะองค์ประกอบเฉพาะเท่านั้น คุณอาจลงเอยด้วยช่วงเวลาที่เลวร้ายทั้งนี้ขึ้นอยู่กับสถานะของมัน สำหรับฉัน มันคือสถานะ “โฮเวอร์” เนื่องจากฉันจำได้ว่าเสียเวลาไปนับไม่ถ้วนในการพยายามจับเวลาการดำเนินการโฮเวอร์หรือแก้ไขเพิ่มเติม CSS ชั่วคราว ฯลฯ

โชคดีที่ Chrome DevTools มีวิธีง่ายๆ ในการเปลี่ยนสถานะขององค์ประกอบที่ตรวจสอบ ยิ่งไปกว่านั้น ตัวเลือกในการทำเช่นนั้นจะอยู่ที่นั่นหากเราคลิกขวาที่องค์ประกอบ (ในแท็บองค์ประกอบ) แต่ด้วยจำนวนของคุณสมบัติและแรงกดดันจากการทำงานแต่ละวัน จึงเป็นเรื่องง่ายที่จะมองข้ามสิ่งนี้:

ใช่ มันง่ายจริงๆ!

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

แผงเครื่องมือ

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

ในการเปิดใช้งานแผงเครื่องมือ ตรวจสอบให้แน่ใจว่าคุณอยู่ในแผง DevTools แล้วกด Ctrl + Shift + P (หรือ Cmd + Shift + P สำหรับผู้ใช้ Mac):

แผงเครื่องมือเต็มไปด้วยความสามารถและความประหลาดใจ ตัวอย่างเช่น คุณทราบหรือไม่ว่าคุณสามารถจับภาพหน้าจอได้โดยตรงจาก DevTools

ฉันพนันได้เลยว่าไม่ เพราะคุณต้องเปิดแผงเครื่องมือและพิมพ์ “ภาพหน้าจอ” ในแถบค้นหาเพื่อดูว่า:

นอกจากนี้ คุณจะสังเกตเห็นตัวเลือกมากมายสำหรับการจับภาพหน้าจอ รวมถึงตัวเลือกหนึ่งสำหรับโหนด DOM ที่เลือก! สำรวจแผงเครื่องมือเพิ่มเติม และฉันรับรองว่าคุณจะไม่ผิดหวัง!

หากคุณต้องการจับภาพหน้าจอของหน้าเว็บใดๆ จากระยะไกล ลองใช้เครื่องมือภาพหน้าจอ admintrick.com

บทสรุป

เบราว์เซอร์ Chrome นั้นเต็มไปด้วยฟีเจอร์มากมาย แต่ที่โดดเด่นคือ DevTools ที่นำเสนอ ดังที่เราเห็นในบทความนี้ มีคุณลักษณะบางอย่างที่ซ่อนไว้อย่างดีและคุณลักษณะอื่นๆ ที่ซ่อนเร้นซึ่งผู้ใช้ส่วนใหญ่ไม่ทราบ เหตุใดคุณลักษณะเหล่านี้จึงถูกซ่อนไว้

ฉันเดาว่าสิ่งเหล่านี้บางส่วนเป็นการทดลอง (เช่น โหมดการออกแบบ) และนักพัฒนา Chrome ต้องการทำให้ผู้ใช้ทั่วไปค้นหาคุณลักษณะเหล่านี้ได้ยาก สำหรับคุณสมบัติอื่นๆ ที่เหลือ ฉันเชื่อว่าเป็นเพียงกรณีของข้อมูลที่มากเกินไป: หากมี เช่น 120 คุณสมบัติ โดยบางคุณสมบัติมีคุณสมบัติย่อยและอื่นๆ แทบจะเป็นไปไม่ได้เลยที่จะออกแบบ UI ที่เหมาะสมสำหรับคุณสมบัติดังกล่าว สถานการณ์ นอกจากนี้ Google ในอดีตยังทำงานได้ไม่ดีนักกับ UX ของผลิตภัณฑ์ ดังนั้นจึงเป็นเช่นนั้น 🤷🏻‍♂️

ไม่ว่าอย่างไรก็ตาม ฉันหวังว่าคุณจะพบว่าคุณลักษณะบางอย่างเหล่านี้มีประโยชน์ แต่ที่สำคัญกว่านั้น ฉันหวังว่าบทความนี้จะทำให้คุณเข้าใจว่าอะไรซ่อนอยู่ที่ใด เพื่อที่ครั้งต่อไปที่คุณต้องการสำรวจหรือค้นหาบางอย่างโดยเฉพาะ คุณจะรู้ว่าต้องไป “เจาะลึก” ที่ไหน 😆

เรื่องล่าสุด

x