คำแนะนำเกี่ยวกับเครื่องมือเว็บของ Google

Sep 14, 2025

วิธีการ

หน้า 1 จาก 5:

ดูและเปลี่ยน HTML, CSS & AMP; js

ดูและเปลี่ยน HTML, CSS & AMP; js
ใช้ดีบักเกอร์
การทำงานกับโหมดอุปกรณ์
เริ่มต้นใช้งานการออกแบบวัสดุ
ไปจับด้วยเว็บแอปที่โปรเกรสซีฟ

Big G, AKA, Google ให้นักพัฒนาเครื่องมือมากมายที่มีวัตถุประสงค์เพื่อให้การออกแบบเว็บง่ายขึ้น ในบทความนี้เราต้องผ่านเครื่องมือที่ดีที่สุดของ Google ที่ดีที่สุดและแสดงวิธีการใช้งานในเวิร์กโฟลว์การออกแบบเว็บและการพัฒนาของคุณ

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

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

ดูและเปลี่ยน HTML, CSS & AMP; js

ตราบใดที่รหัสเว็บไซต์ยังไม่ได้รับการแก้ไขแล้วทุกคนสามารถดูได้โดยใช้เครื่องมือนักพัฒนาของ Chrome ก่อนอื่นให้ตรวจสอบรุ่นของ Chrome - ขั้นตอนต่อไปนี้ทำงานกับเวอร์ชัน 70.0.3538.67 ทำงานบนเวิร์กสเตชัน Ubuntu 64 บิต ถัดไปเปิดเมนูแฮมเบอร์เกอร์และคลิกเครื่องมือ & GT เพิ่มเติม เครื่องมือสำหรับนักพัฒนา.

Launch Google's Developer Tools — เปิดตัวเครื่องมือนักพัฒนาและคุณควรเห็นหน้าจอที่คล้ายกับ [คลิกที่ไอคอนที่ด้านบนขวาเพื่อดูภาพขยาย]

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

โดยค่าเริ่มต้นเครื่องมือนักพัฒนาเริ่มต้นด้วยแท็บคอนโซลที่โหลด มันมีเอาต์พุตที่ปล่อยออกมาโดยการเรียกใช้ของฟังก์ชั่นการบันทึกคอนโซล ข้อผิดพลาดการแสดงผลยังปรากฏขึ้นที่นั่น - หากคุณพบเส้นสีแดงบางสิ่งบางอย่างผิดปกติในมาร์กอัปหรือรหัสของหน้าของคุณ คลิกที่ 'URL' เล็ก ๆ ทางด้านขวามือนำคุณไปที่บรรทัดซึ่งทำให้ข้อความปรากฏขึ้น

ตรวจสอบมาร์กอัป

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

ที่ raison d'etre ของแท็บคือการแสดงโครงสร้างของโครงสร้าง CSS วิดเจ็ต 'รวบรวม' CSS จากแหล่งต่าง ๆ ซึ่งแสดงอย่างเรียบร้อยและถัดจากซึ่งกันและกัน ในกรณีของตัวอย่างที่แสดงในรูปเราจะเห็นว่ารูปแบบนั้นมีให้จากแท็ก 'Div' และเครื่องหมาย 'หลัก' ของหน้า

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

Google's web tools — พื้นหลังสีเหลืองระบุเนื้อหาของหน้าต่างอาจมีการกรอง [คลิกที่ไอคอนที่ด้านบนขวาเพื่อดูภาพขยาย]

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

ทำการวิเคราะห์อย่างละเอียด

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

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

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

หน้าถัดไป: วิธีใช้ดีบักเกอร์ของ Google

หน้าปัจจุบัน: ดูและเปลี่ยน HTML, CSS & AMP; js

หน้าต่อไป ใช้ดีบักเกอร์

คำแนะนำเกี่ยวกับเครื่องมือเว็บของ Google

ดูและเปลี่ยน HTML, CSS & AMP; js

ตรวจสอบมาร์กอัป

ทำการวิเคราะห์อย่างละเอียด

วิธีการ - บทความยอดนิยม

วิธีการวาดสัตว์: 15 เคล็ดลับยอดนิยม

Krita Tutorials: เรียนรู้พื้นฐานของซอฟต์แวร์ศิลปะดิจิทัล

วิธีการสร้างแอป AR

วิธีการเลือกด้วยเครื่องมือ Lasso ของ Photoshop

ต้นแบบที่สมบูรณ์แบบและการออกแบบมือที่สมบูรณ์แบบด้วย Marvel

วิธีการทาสีเพชรประดับที่น่ารื่นรมย์

สร้างเอฟเฟกต์เทน้ำใน Realflow

วิธีใช้การผสมผสานรูปร่างเป็นตัวละครเคลื่อนไหว

หมวดหมู่