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

ปุ่มลัด Chrome Devtools และยูทิลิตี้การพัฒนาอื่น ๆ จาก Google:

Google Chrome DevTools คืออะไร

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

หากต้องการใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เวอร์ชันล่าสุด คุณจะต้องใช้ Google Chrome นกขมิ้นซึ่งเป็น Chrome เวอร์ชันทดลอง Canary สามารถทำงานติดกับ Chrome เพื่อให้คุณสามารถตรวจสอบปัญหาที่เกิดขึ้นได้

คุณสามารถปรับปรุงการพัฒนาของคุณได้โดยใช้ chrome://flagsอนุญาตคุณสมบัติทดลองในเครื่องมือสำหรับนักพัฒนา จากนั้นคุณสามารถใช้แผงการตั้งค่าในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เพื่อสลับการทดสอบแต่ละรายการได้

หากต้องการเปิดใช้งานฟังก์ชันทดลองของแผงผู้พัฒนา ให้เปิดใช้งานรายการนี้:

กำลังเปิด Chrome DevTools

มีหลายวิธีในการเปิด Chrome DevTools

1. เปิดเมนูเบราว์เซอร์ของคุณ

คุณสามารถเปิด Chrome DevTools ได้จากเมนู Chrome คลิกเครื่องมือเพิ่มเติม จากนั้นคลิกเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์

2. เปิดโดยคลิกขวา

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

3. เปิดโดยใช้ปุ่มลัด

คุณยังสามารถใช้แป้นพิมพ์ลัดต่อไปนี้:

• หน้าต่าง: F12 หรือ Ctrl + Shift + I
• แม็ค: Cmd + เลือก + I

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

การสลับไฟล์อย่างรวดเร็ว

คุณสามารถเข้าถึงไฟล์ใดๆ ในโครงการหรือหน้าเว็บปัจจุบันได้อย่างง่ายดายโดยกด Ctrl + P (Cmd + P) เมื่อ Chrome DevTools เปิดอยู่และค้นหาชื่อ

พริตตี้พริ้นท์()

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

การแก้ไของค์ประกอบ HTML

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

เปลี่ยนคุณสมบัติ CSS

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

ค้นหาในซอร์สโค้ด

คุณสามารถค้นหาซอร์สโค้ดของคุณได้อย่างรวดเร็วโดยกด Ctrl + Shift + F (Cmd + Opt + F)

คุณยังสามารถค้นหาโดยใช้ตัวเลือก CSS ได้โดยกด Ctrl + F(Cmd + F

เบรกพอยต์จาวาสคริปต์

เมื่อทำการดีบั๊ก Javascript การตั้งค่าเบรกพอยต์อาจเป็นประโยชน์ในบางครั้ง คุณสามารถตั้งค่าเบรกพอยต์ใน Chrome DevTools ได้โดยคลิกที่หมายเลขบรรทัดที่คุณต้องการแบ่ง แล้วกด Ctrl+R(Cmd+R) เพื่อรีเฟรชหน้าเว็บ จากนั้นเพจจะรันตรงไปยังเบรกพอยต์นั้น

ไปที่หมายเลขบรรทัด

คุณสามารถข้ามไปที่บรรทัดโค้ดของคุณโดยอัตโนมัติโดยกด Ctrl + O (Cmd + O) และใช้ไวยากรณ์บรรทัด ในตัวอย่างด้านล่าง เราพิมพ์:200:10 แล้วกด Enter เพื่อไปยังบรรทัดที่ 200 ของคอลัมน์ 10

เคอร์เซอร์หลายตัว

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

การเปลี่ยนตำแหน่ง Dock ของ DevTools

คุณยังสามารถเปลี่ยนตำแหน่ง Dock ของ Chrome DevTools ได้ด้วย มีสามตัวเลือกให้เลือก: ด้านล่าง ด้านข้าง และไม่ได้เชื่อมต่อ (ลอย) หากต้องการสลับระหว่างตำแหน่งท่าเรือ คุณสามารถกด Ctrl + Shift + D (Cmd + Shift + D) จากนั้นที่มุมขวาบน ให้เลือกตำแหน่งที่ควรวางแท่นวาง

กำลังล้างคุกกี้

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

โหมดอุปกรณ์

คุณสามารถทดสอบเว็บไซต์และการสืบค้นสื่อของคุณเพื่อให้แน่ใจว่ารูปแบบที่ตอบสนองนั้นใช้งานได้โดยการสลับไปที่โหมดอุปกรณ์ หรือบางทีคุณอาจต้องการดูว่าเพจแสดงผลความละเอียดหน้าจอเท่าใด เพื่อที่คุณจะได้รู้ว่าจะใช้คำสั่งสื่อได้ที่ไหน หากต้องการเข้าสู่โหมดอุปกรณ์ ให้คลิกไอคอนโทรศัพท์ขนาดเล็กใน Chrome DevTools หรือคุณสามารถกด Ctrl + Shift + M(Cmd + Shift + M) จากนั้นคุณสามารถเลือกอุปกรณ์ที่คุณต้องการจำลอง การวางแนว และแม้แต่ความละเอียดได้ คุณยังสามารถเปลี่ยนการควบคุมปริมาณเครือข่ายเพื่อดูว่าเว็บไซต์ของคุณจะแสดงอย่างไรบนการเชื่อมต่อ 2G ปกติ

จานสีที่กำหนดเองและการเลือกสี

เปลี่ยนรูปแบบสี

คุณสามารถสลับระหว่างการจัดรูปแบบ RGBA, HSL และ Hex ได้โดย Shift+คลิกที่บล็อกสี

เซ็นเซอร์จำลองอุปกรณ์

คุณลักษณะที่ดีของ Chrome DevTools คือคุณสามารถจำลองหน้าจอสัมผัสได้ เมื่อต้องการทำเช่นนี้ คลิกคอนโซล การจำลอง และเซนเซอร์

สลับสถานะองค์ประกอบ

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

คัดลอกรูปภาพเป็นข้อมูล URI (เข้ารหัส base64)

คุณสามารถบันทึกรูปภาพจากหน้าเว็บเป็น URI ข้อมูลหรือเข้ารหัส base64 ได้ ไม่จำเป็นต้องมีตัวแปลงออนไลน์ฟรี เนื่องจากมีอยู่แล้วใน Chrome DevTools ในการดำเนินการนี้ เพียงคลิกที่แผงเครือข่าย คลิกที่รูปภาพ จากนั้นคลิกขวาที่รูปภาพแล้วเลือกคัดลอกรูปภาพเป็น URL ข้อมูล

จากนั้น คุณจะได้รับรูปภาพในรูปแบบต่อไปนี้: "URURIsdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAFt..."

แสดงตัวแทนผู้ใช้ Shadow DOM

เมื่อคุณจัดการกับสิ่งต่างๆ เช่น ปุ่มและอินพุต เว็บเบราว์เซอร์มักจะสร้างแอตทริบิวต์ที่ซ่อนอยู่ หากต้องการดูการคลิกเหล่านี้ในการตั้งค่า ให้กด F1(?) คุณสามารถเปิดใช้งาน "แสดงตัวแทนผู้ใช้ DOM" ได้ ดังที่คุณเห็นในตัวอย่างนี้ ตอนนี้เราจะเห็นได้ว่ารากเงา # ที่กำลังสร้างกำลังถูกสร้างขึ้น คุณสามารถก้าวไปอีกขั้นและใช้สไตล์ CSS กับแอตทริบิวต์ที่ซ่อนอยู่ได้

เลือกเหตุการณ์ถัดไป (วิยะ)

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

พื้นที่ทำงาน – การเชื่อมต่อไฟล์ในเครื่องเข้ากับโปรเจ็กต์

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

ในการดำเนินการนี้ ให้คลิกขวาที่โฟลเดอร์แล้วเลือก “เพิ่มโฟลเดอร์ไปยัง Local Workspace” จากนั้น เพื่อให้เป็นแบบถาวร ให้คลิกขวาที่ไฟล์แล้วเลือก "Map to File System Resource..."

แถบฟิล์มเครือข่าย

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

หากต้องการดำเนินการนี้ ให้คลิกที่แผงไทม์ไลน์แล้วกด Ctrl + R (Cmd + R) เพื่อรีเฟรชหน้า จากนั้นคุณสามารถคลิกที่แผงสรุปในแผงสรุปได้

โหลดเนื้อหา DOM แล้ว

ในเครื่องมือสำหรับนักพัฒนา คุณสามารถดูเวลา DOMContentLoaded และเวลาโหลดทั้งหมดได้อย่างแม่นยำ หากต้องการเรียกใช้ ให้คลิกที่แผงเครือข่าย คลิกแสดงภาพรวม แล้วกด Ctrl + R (Cmd + R) เพื่อรีเฟรชหน้า เส้นสีน้ำเงินจะปรากฏขึ้นสำหรับ DOMContentLoaded พร้อมด้วยเส้นสีแดงสำหรับเวลาในการโหลดทั้งหมด โดยทั่วไป สิ่งที่เหลืออยู่หรือแตะเส้นสีน้ำเงินคือสินทรัพย์ที่บล็อก DOM หรือเรียกว่าสินทรัพย์บล็อกการแสดงผล

การตรวจสอบ AMP HTML ของ Google

ใช้เครื่องมือสำหรับนักพัฒนา Firefox ใน Google Chrome

คุณรู้ไหมว่าคุณสามารถเรียกใช้เครื่องมือนักพัฒนา Firefox ใน Google Chrome ได้ Valence เป็นการทดลองเพิ่มเติมจากทีมงาน Firefox ที่ช่วยให้ Firefox Developer Tools สามารถดีบักเบราว์เซอร์ได้หลากหลายยิ่งขึ้น Valence ต้องใช้ Chrome 37.0 ขึ้นไป

เครื่องมือพัฒนาสไตล์ใน Google Chrome

เมื่อเร็ว ๆ นี้ฉันพบว่า Chrome รองรับธีมสำหรับเครื่องมือ dev ฉันอยากจะลองสิ่งนี้ทันที ฉันจะบอกทันทีว่าฉันไม่พอใจกับผลลัพธ์เลย :-)

การตระเตรียม

ในการติดตั้งธีมสำหรับเครื่องมือ dev คุณต้องเปิดใช้งานคุณสมบัติทดลอง ในการดำเนินการนี้ ให้ป้อน chrome://flags/#enable-devtools-experiments ในแถบที่อยู่ของ Google Chrome ใกล้จุด เปิดใช้งานการทดสอบเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์คลิก เปิดใช้งาน- ตอนนี้รีสตาร์ทเบราว์เซอร์ของคุณ (ควรมีปุ่มที่ด้านล่าง)

เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ (cmd + shif + i / F12) ไปที่การตั้งค่า (ไอคอนรูปเฟือง) ไปที่แท็บ การทดลองและทำเครื่องหมายที่ช่องถัดจาก "อนุญาตธีม UI ที่กำหนดเอง"
ตอนนี้คุณสามารถติดตั้งธีมจากร้านค้าได้อย่างปลอดภัย

การค้นหาและติดตั้งธีม

คุณสามารถค้นหาธีมได้ในร้านค้า Google Chrome ค้นหาธีม dev แต่ไม่สะดวกนัก เกือบทุกธีมจะถูกรวบรวมไว้บนเว็บไซต์ devthemez.com และยังมีหัวข้อสำหรับเครื่องมือ dev ด้วย

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

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

เว็บเบราว์เซอร์สมัยใหม่ทุกตัวมีชุดเครื่องมือสำหรับนักพัฒนาอันทรงพลัง เครื่องมือเหล่านี้ทำสิ่งต่างๆ มากมาย ตั้งแต่การตรวจสอบ HTML, CSS และ JavaScript ที่โหลดในปัจจุบัน ไปจนถึงการแสดงเนื้อหาที่หน้าเว็บร้องขอ และระยะเวลาในการโหลด บทความนี้จะอธิบายวิธีใช้ฟังก์ชันพื้นฐานของ devtools ของเบราว์เซอร์

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

วิธีเปิด devtools ในเบราว์เซอร์ของคุณ

devtools อยู่ภายในเบราว์เซอร์ของคุณในหน้าต่างย่อยที่มีลักษณะประมาณนี้ ขึ้นอยู่กับเบราว์เซอร์ที่คุณใช้:

คุณจะดึงมันขึ้นมาได้อย่างไร? สามวิธี:

Inspector: DOM explorer และตัวแก้ไข CSS

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

ถ้าคุณ อย่าพบผู้ตรวจสอบ

• แตะ/คลิก สารวัตรแท็บ
• ใน Internet Explorer ให้แตะ/คลิก DOM Explorerหรือกด Ctrl + 1
• ใน Microsoft Edge หรือ Opera ให้แตะ/คลิกองค์ประกอบ
• ใน Safari การควบคุมต่างๆ จะไม่แสดงอย่างชัดเจน แต่คุณควรเห็น HTML หากคุณไม่ได้เลือกสิ่งอื่นที่จะปรากฏในหน้าต่าง กดปุ่ม สไตล์ปุ่มเพื่อดู CSS

สำรวจตัวตรวจสอบ DOM

ในการเริ่มต้น คลิกขวา (Ctrl คลิก) องค์ประกอบ HTML ในตัวตรวจสอบ DOM และดูที่เมนูบริบท ตัวเลือกเมนูที่ใช้ได้จะแตกต่างกันไปในแต่ละเบราว์เซอร์ แต่ตัวเลือกที่สำคัญส่วนใหญ่จะเหมือนกัน:

• ลบโหนด(บางครั้ง ลบองค์ประกอบ- ลบองค์ประกอบปัจจุบัน
• แก้ไขเป็น HTML(บางครั้ง เพิ่มแอตทริบิวต์/แก้ไขข้อความ- ให้คุณเปลี่ยน HTML และดูผลลัพธ์ได้ทันที มีประโยชน์มากสำหรับการดีบักและการทดสอบ
• :hover/:active/:โฟกัส- บังคับให้เปิดสถานะองค์ประกอบ เพื่อให้คุณเห็นว่าสไตล์ขององค์ประกอบจะเป็นอย่างไร
• คัดลอก/คัดลอกเป็น HTML- คัดลอก HTML ที่เลือกในปัจจุบัน
• เบราว์เซอร์บางตัวก็มี คัดลอกเส้นทาง CSSและ คัดลอก XPathพร้อมใช้งาน เพื่อให้คุณสามารถคัดลอกตัวเลือก CSS หรือนิพจน์ XPath ที่จะเลือกองค์ประกอบ HTML ปัจจุบัน

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

สำรวจตัวแก้ไข CSS

ตามค่าเริ่มต้น ตัวแก้ไข CSS จะแสดงกฎ CSS ที่ใช้กับองค์ประกอบที่เลือกในปัจจุบัน:

คุณสมบัติเหล่านี้มีประโยชน์อย่างยิ่ง:

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

คุณจะสังเกตเห็นแท็บที่สามารถคลิกได้จำนวนหนึ่งที่ด้านบนของ CSS Viewer:

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

หาข้อมูลเพิ่มเติม

ค้นหาข้อมูลเพิ่มเติมเกี่ยวกับ Inspector ในเบราว์เซอร์ต่างๆ:

• ตัวตรวจสอบ Chrome DOM

ดีบักเกอร์ JavaScript

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

เพื่อไปที่ตัวดีบักเกอร์:

ไฟร์ฟอกซ์: เลือก ➤ นักพัฒนาเว็บ ➤ ดีบักเกอร์หรือกด Ctrl + Shift + S เพื่อเปิด JavaScript Debugger หากมีการแสดงเครื่องมืออยู่แล้ว ให้คลิกที่ ดีบักเกอร์แท็บ

โครเมียม: เปิดเครื่องมือสำหรับนักพัฒนาแล้วเลือก แหล่งที่มาแท็บ (Opera ทำงานในลักษณะเดียวกัน)

Edge และ Internet Explorer 11: กด F12 จากนั้น Ctrl + 3 หรือหากเครื่องมือแสดงอยู่แล้ว ให้คลิกที่แท็บ Debugger

ซาฟารี: เปิดเครื่องมือสำหรับนักพัฒนาแล้วเลือกแท็บดีบักเกอร์

สำรวจดีบักเกอร์

มีสามบานหน้าต่างใน JavaScript Debugger บน Firefox

รายการไฟล์

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

รหัสแหล่งที่มา

ตั้งค่าเบรกพอยต์ที่คุณต้องการหยุดการดำเนินการชั่วคราว ในภาพต่อไปนี้ ไฮไลต์บนหมายเลข 18 แสดงว่าเส้นมีชุดเบรกพอยต์

ดูสำนวนและเบรกพอยต์

บานหน้าต่างด้านขวาแสดงรายการนิพจน์การดูที่คุณเพิ่มและจุดพักที่คุณได้ตั้งค่าไว้

ในภาพส่วนแรก ดูการแสดงออกแสดงว่าตัวแปร listItems ได้รับการเพิ่มแล้ว คุณสามารถขยายรายการเพื่อดูค่าในอาร์เรย์ได้

ส่วนถัดไป เบรกพอยท์แสดงรายการเบรกพอยท์ที่ตั้งไว้บนเพจ ใน example.js มีการตั้งค่าเบรกพอยต์ในคำสั่ง listItems.push(inputNewItem.value);

สองส่วนสุดท้ายจะปรากฏเฉพาะเมื่อมีการเรียกใช้โค้ดเท่านั้น

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

ส่วนสุดท้าย ขอบเขตจะแสดงค่าที่มองเห็นได้จากจุดต่างๆ ภายในโค้ดของคุณ ตัวอย่างเช่น ในภาพด้านล่าง คุณสามารถดูออบเจ็กต์ที่มีอยู่ในโค้ดในฟังก์ชัน addItemClick

หาข้อมูลเพิ่มเติม

ค้นหาข้อมูลเพิ่มเติมเกี่ยวกับดีบักเกอร์ JavaScript ในเบราว์เซอร์ต่างๆ:

คอนโซล JavaScript

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

หากเครื่องมือสำหรับนักพัฒนาเปิดอยู่แล้ว ให้คลิกหรือกดแท็บคอนโซล

ถ้าไม่เช่นนั้น Firefox จะอนุญาตให้คุณเปิดคอนโซลได้โดยตรงโดยใช้ Ctrl + Shift + K หรือใช้คำสั่งเมนู: เมนู ➤ นักพัฒนาเว็บ➤ เว็บคอนโซลหรือ เครื่องมือ ➤ นักพัฒนาเว็บ ➤ เว็บคอนโซลบนเบราว์เซอร์อื่น ให้เปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ จากนั้นคลิกแท็บคอนโซล

จะได้หน้าต่างดังนี้:

หากต้องการดูว่าเกิดอะไรขึ้น ให้ลองป้อนส่วนย่อยของโค้ดต่อไปนี้ลงในคอนโซลทีละรายการ (แล้วกด Enter):

1. alert("สวัสดี!");
2. document.querySelector("html").style.พื้นหลังสี = "สีม่วง";
3. var myImage = document.createElement("img"); myImage.setAttribute("src","https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png"); document.querySelector("h1").appendChild(myImage);

ตอนนี้ลองป้อนรหัสเวอร์ชันที่ไม่ถูกต้องต่อไปนี้แล้วดูว่าคุณได้รับอะไร

1. alert("สวัสดี!);
2. document.cheeseSelector("html").style.พื้นหลังสี = "สีม่วง";
3. var myImage = document.createElement("img"); myBanana.setAttribute("src","https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png"); document.querySelector("h1").appendChild(myImage);

คุณจะเริ่มเห็นประเภทของข้อผิดพลาดที่เบราว์เซอร์ส่งคืน บ่อยครั้งข้อผิดพลาดเหล่านี้ค่อนข้างเป็นความลับ แต่ก็ควรจะค่อนข้างง่ายที่จะแก้ไขปัญหาเหล่านี้!

หาข้อมูลเพิ่มเติม

ค้นหาข้อมูลเพิ่มเติมเกี่ยวกับคอนโซล JavaScript ในเบราว์เซอร์ต่างๆ:

• คอนโซล Chrome JavaScript (ตัวตรวจสอบของ Opera ทำงานในลักษณะเดียวกัน)

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

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

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

แผงนักพัฒนาซอฟต์แวร์อยู่ที่ด้านล่างของเบราว์เซอร์ของคุณ:

จะแสดงมันออกมาได้อย่างไร? มีสามตัวเลือก:

ตัวตรวจสอบ: เบราว์เซอร์ DOM และตัวแก้ไข CSS

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

ถ้าคุณคือ คุณเห็นสารวัตร,

• คลิกที่แท็บ สารวัตร.
• ใน Internet Explorer ให้คลิกที่ เบราว์เซอร์ DOM,หรือกด Ctrl + 1
• ใน Safari ตัวควบคุมจะไม่แสดงอย่างชัดเจน แต่คุณควรเห็นโค้ด HTML เว้นแต่คุณจะเลือกอย่างอื่นในหน้าต่างการออกแบบ คลิกที่ปุ่ม สไตล์,เพื่อดู CSS

ภาพรวมของผู้ตรวจสอบ DOM

ในการเริ่มต้น ให้ลองคลิกขวา (Ctrl+คลิก) บนองค์ประกอบ HTML ในตัวตรวจสอบ DOM และดูที่เมนูบริบท รายการเมนูอาจแตกต่างกันไปในแต่ละเบราว์เซอร์ แต่รายการที่สำคัญจะเหมือนกัน:

• ลบโหนด(บางครั้ง ลบองค์ประกอบ- ลบองค์ประกอบปัจจุบัน
• แก้ไขเป็น HTML(บางครั้ง เพิ่มแอตทริบิวต์/แก้ไขข้อความ- ช่วยให้คุณสามารถแก้ไข HTML และดูผลลัพธ์ "สด" มีประโยชน์มากสำหรับการดีบักและการทดสอบ
• :hover/:active/:โฟกัส- บังคับให้องค์ประกอบเปลี่ยนสถานะเป็นสถานะที่ใช้สไตล์ของคุณ
• คัดลอก/คัดลอกเป็น HTML- คัดลอก HTML ที่เลือกในปัจจุบัน

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

ภาพรวมตัวแก้ไข CSS

ตามค่าเริ่มต้น ตัวแก้ไข CSS จะแสดงคุณสมบัติ CSS ที่ใช้กับองค์ประกอบที่เลือกในปัจจุบัน:

คุณสมบัติเหล่านี้สะดวกเป็นพิเศษ:

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

คุณอาจสังเกตเห็นแท็บอื่นๆ ในตัวแก้ไข CSS แล้ว:

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

เพื่อเรียนรู้เพิ่มเติม

เรียนรู้เพิ่มเติมเกี่ยวกับ Inspector ในเบราว์เซอร์ต่างๆ:

• ตัวตรวจสอบ Chrome DOM (ตัวตรวจสอบของ Opera คล้ายกับตัวตรวจสอบของ Chrome)

คอนโซลจาวาสคริปต์

คอนโซล JavaScript เป็นเครื่องมือที่มีประโยชน์อย่างเหลือเชื่อสำหรับการดีบัก JavaScript หากไม่ทำงานตามที่คาดไว้ ช่วยให้คุณสามารถโหลด JavaScript ตรงกันข้ามกับลำดับที่เบราว์เซอร์โหลดสคริปต์ และรายงานข้อผิดพลาดทันทีที่เบราว์เซอร์พยายามรันโค้ดของคุณ หากต้องการเข้าถึงคอนโซลจากเบราว์เซอร์ใด ๆ เพียงคลิกที่ปุ่มคอนโซล (ใน Internet Explorer คลิก Ctrl + 2.) หน้าต่างจะเปิดขึ้นดังภาพด้านล่าง:

เพื่อให้เข้าใจถึงสิ่งที่เกิดขึ้น ให้ลองพิมพ์ข้อมูลโค้ดลงในคอนโซลทีละรายการ (แล้วกด Enter):

1. alert("สวัสดี!");
2. document.querySelector("html").style.พื้นหลังสี = "สีม่วง";
3. var myImage = document.createElement("img"); myImage.setAttribute("src","https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg"); document.querySelector("h1").appendChild(myImage);

ลองใช้โค้ดเวอร์ชันถัดไปที่ไม่ถูกต้องแล้วดูว่าเกิดอะไรขึ้น

1. alert("สวัสดี!);
2. document.cheeseSelector("html").style.พื้นหลังสี = "สีม่วง";
3. var myImage = document.createElement("img"); myBanana.setAttribute("src","https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg"); document.querySelector("h1").appendChild(myImage);

คุณจะเห็นข้อผิดพลาดบางอย่างที่เบราว์เซอร์จะแจ้งให้คุณทราบ บ่อยครั้งที่ข้อผิดพลาดเหล่านี้ดูค่อนข้างคลุมเครือ แต่ควรจะเข้าใจปัญหาได้ง่ายพอสมควร!

เพื่อเรียนรู้เพิ่มเติม

เรียนรู้เพิ่มเติมเกี่ยวกับคอนโซล JavaScript ในเบราว์เซอร์ต่างๆ:

• คอนโซล Chrome JavaScript (ตัวตรวจสอบของ Opera คล้ายกับตัวตรวจสอบของ Chrome)

พวกเราหลายคนใช้จ่ายหลายร้อยหลายพันดอลลาร์ไปกับบริการที่ช่วยให้การทำงานในแต่ละวันของเราเป็นอัตโนมัติและลดความซับซ้อนลง แต่เรามีชุดเครื่องมือฟรีที่ยอดเยี่ยมสำหรับ SEO ไว้คอยบริการ - เครื่องมือสำหรับนักพัฒนา (DevTools) ในเบราว์เซอร์ Chrome ด้วยความช่วยเหลือนี้ คุณสามารถตรวจสอบลักษณะที่สำคัญที่สุดและพื้นฐานที่สุดของหน้าใดๆ สำหรับการเพิ่มประสิทธิภาพกลไกค้นหา

Chrome DevTools มีแอปพลิเคชั่นที่มีประโยชน์มากซึ่งจะมีประโยชน์เมื่อทำการวิเคราะห์ SEO ด้านล่างเราจะดูรายละเอียดเพิ่มเติม

ในการเริ่มต้น ให้เปิดหน้าเว็บที่คุณต้องการทดสอบในเบราว์เซอร์ของคุณ จากนั้นเปิดแถบเครื่องมือนักพัฒนา หากต้องการทำสิ่งนี้ ให้ไปที่เมนู Chrome ซึ่งอยู่ที่มุมขวาบนของหน้าจอแล้วเลือก " เครื่องมือเพิ่มเติม» -> « เครื่องมือสำหรับนักพัฒนา».

คุณยังสามารถใช้แป้นพิมพ์ลัด: Ctrl+Shift+I (Windows) หรือ Cmd+Opt+I (Mac)

อีกทางเลือกหนึ่งคือคลิกขวาที่หน้าที่คุณต้องการตรวจสอบและเลือกรายการในเมนูที่ปรากฏขึ้น "ดูโค้ด".

ตอนนี้คุณสามารถเริ่มการตรวจสอบได้แล้ว

1. การตรวจสอบองค์ประกอบหลักของเนื้อหาของหน้า

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

คุณสามารถดู DOM ของหน้าใดก็ได้บนแท็บ "องค์ประกอบ"แผงเครื่องมือสำหรับนักพัฒนา

โปรดตรวจสอบแท็บนี้เพื่อให้แน่ใจว่าข้อมูลทั้งหมดที่คุณต้องการพร้อมใช้งานสำหรับ Google

ตัวอย่างเช่น ที่มุมซ้ายบนของภาพหน้าจอด้านล่าง เราจะเห็นว่าข้อความเนื้อหาที่แสดง (ในกรอบสีแดง) อยู่ในแท็ก