เครื่องมือสำหรับนักพัฒนาของ Google Chrome: แผงองค์ประกอบ

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

แผงองค์ประกอบ

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

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

รูปที่

คลิกเพื่อขยายภาพ

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

รูปที่ B

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

, และคลาสด้วย วิธีที่ดีวิธีหนึ่งในการดูใต้ฝากระโปรงคือการเลือก class หรือ id anchor attribute; ตัวอย่างเช่นในเว็บไซต์ Google Code ฉันเลือกมุมมองพาเนลและในองค์ประกอบฉันสามารถดูกฎ CSS ที่จับคู่กันซึ่งกำหนดแอตทริบิวต์ได้ ดังที่แสดงใน รูป C เราสามารถพิจารณาว่าขนาดตัวอักษรคือ 1em ขอบเท่ากับศูนย์การเว้นว่างคือ. 1em, 0 และอื่น ๆ

รูปที่ C

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

อัพเดทได้ทันที

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

ตอนนี้สมมติว่าคุณต้องการดูว่าเกิดอะไรขึ้นกับสไตล์เมื่อคุณปิดใช้งานหรือแก้ไขคุณสมบัติ จากกฎ CSS ที่จับคู่คุณสามารถปิดใช้งานคุณสมบัติใด ๆ ได้โดยยกเลิกการเลือกช่องทำเครื่องหมายสีเขียวดังที่แสดงในตัวอย่างด้านล่างใน รูป D ที่ขอบถูกปิดใช้งานสำหรับ class = "g-unit g-first" ผลลัพธ์ใน ส่วนข่าวและประกาศลดลงด้านล่างส่วนผลิตภัณฑ์แนะนำของหน้า

รูป D

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

คุณยังสามารถคลิกสองครั้งที่คุณสมบัติสไตล์ที่ไม่ใช่ผู้ใช้ตัวแทนเพื่อแก้ไขหรือลบ ตัวอย่างเช่นดับเบิลคลิกที่ float: left; คุณสมบัติ คุณควรเห็นสิ่งนี้ตามที่แสดงใน รูป E

รูปที่ E

การพิมพ์หรือวางคุณสมบัติอย่างน้อยหนึ่งคุณสมบัติจะเพิ่มคุณสมบัติใหม่ให้กับกฎสไตล์ หากคุณแก้ไขค่าคุณสมบัติสไตล์ด้วยตัวเลขคุณสามารถใช้ปุ่มลูกศรขึ้นหรือลงเพื่อเปลี่ยนหมายเลขและกดปุ่ม Alt / Option ค้างไว้โดยเพิ่มทีละ 0.1 กดปุ่ม Shift ค้างไว้ทีละ 10 นอกจากนี้คุณยังสามารถเพิ่มคุณสมบัติเพิ่มเติมได้โดยดับเบิลคลิกที่พื้นที่สีขาวทางด้านซ้ายหรือด้านล่างรายการที่มีอยู่หรือผ่านการวางคุณสมบัติหลายรายการคั่นด้วยเครื่องหมายอัฒภาค คุณสามารถแก้ไขชื่อตัวเลือกสไตล์ด้วยการคลิกสองครั้งที่ชื่อและคุณสามารถเพิ่มตัวเลือกสไตล์ใหม่โดยใช้เมนูเกียร์ซึ่งอยู่ทางด้านขวาของแถบส่วนสไตล์ตามที่แสดงใน รูป F ด้านล่าง

รูป F

แบบจำลองกล่องตัวชี้วัด

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

รูปที่ G

คุณสมบัติ

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

รูป H

ผู้ฟังเหตุการณ์

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

รูปที่ 1

ฟังก์ชั่นการค้นหา

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