มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (Chrome 73)

Kayce Basques

มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome 73 มีดังนี้

เวอร์ชันวิดีโอของบันทึกประจำรุ่นเหล่านี้

จุดตรวจสอบ

ใช้จุดตรวจสอบเพื่อบันทึกข้อความไปยังคอนโซลโดยไม่ทำให้โค้ดรกด้วย console.log()

วิธีเพิ่มจุดตรวจสอบ

  1. คลิกขวาที่หมายเลขบรรทัดที่ต้องการเพิ่มจุดตรวจสอบ

    การเพิ่มจุดตรวจสอบ

    รูปที่ 1 การเพิ่มจุดตรวจสอบ

  2. เลือกเพิ่มจุดตรวจสอบ เครื่องมือแก้ไขเบรกพอยท์จะปรากฏขึ้น

    เครื่องมือแก้ไขเบรกพอยท์

    รูปที่ 2 เครื่องมือแก้ไขเบรกพอยท์

  3. ในตัวแก้ไขเบรกพอยท์ ให้ป้อนนิพจน์ที่คุณต้องการบันทึกไปยังคอนโซล

    การพิมพ์นิพจน์จุดตรวจสอบ

    รูปที่ 3 การพิมพ์นิพจน์จุดตรวจสอบ

    เคล็ดลับ เมื่อออกจากระบบตัวแปร (เช่น TodoApp) ให้รวมตัวแปรไว้ในออบเจ็กต์ (เช่น {TodoApp}) เพื่อออกจากระบบชื่อและค่าในคอนโซล โปรดดูบันทึกออบเจ็กต์เสมอและ ค่าพร็อพเพอร์ตี้ออบเจ็กต์ Shorts เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับไวยากรณ์นี้

  4. กด Enter หรือคลิกด้านนอกเครื่องมือแก้ไขเบรกพอยท์เพื่อบันทึก ป้ายสีส้ม ที่ด้านบนของหมายเลขบรรทัดแสดงถึงจุดตรวจสอบ

    ป้ายจุดตรวจสอบสีส้มในบรรทัด 174

    รูปที่ 4 ป้ายจุดตรวจสอบสีส้มในบรรทัด 174

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

ผลลัพธ์ของนิพจน์ Logpoint ในคอนโซล

รูปที่ 5 ผลลัพธ์ของนิพจน์ Logpoint ในคอนโซล

ดูปัญหา Chromium #700519 เพื่อรายงานข้อบกพร่องหรือแนะนำการปรับปรุง

เคล็ดลับเครื่องมือโดยละเอียดในโหมดตรวจสอบ

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

การตรวจสอบโหนด

รูปที่ 6 การตรวจสอบโหนด

วิธีตรวจสอบโหนด

  1. คลิกตรวจสอบ การตรวจสอบโหนด

    เคล็ดลับ วางเมาส์เหนือตรวจสอบเพื่อดูแป้นพิมพ์ลัด

  2. ในวิวพอร์ต ให้วางเมาส์เหนือโหนด

ส่งออกข้อมูลการครอบคลุมของโค้ด

คุณส่งออกข้อมูลการครอบคลุมของโค้ดเป็นไฟล์ JSON ได้แล้ว โดย JSON มีลักษณะดังนี้

[
  {
    "url": "https://wndt73.glitch.me/style.css",
    "ranges": [
      {
        "start": 0,
        "end": 21
      },
      {
        "start": 45,
        "end": 67
      }
    ],
    "text": "body { margin: 1em; } figure { padding: 0; } h1 { color: #317EFB; }"
  },
  ...
]

url คือ URL ของไฟล์ CSS หรือ JavaScript ที่เครื่องมือสำหรับนักพัฒนาเว็บวิเคราะห์ ranges อธิบาย ส่วนของโค้ดที่มีการใช้งาน start คือออฟเซ็ตเริ่มต้นของช่วงที่ใช้ end คือค่าชดเชยสิ้นสุด text คือข้อความแบบเต็มของไฟล์

ในตัวอย่างข้างต้น ช่วง 0 ถึง 21 ตรงกับ body { margin: 1em; } และช่วง 45 ถึง 67 จะสอดคล้องกับ h1 { color: #317EFB; } กล่าวคือ มีการใช้ชุดกฎแรกและชุดสุดท้าย แล้วอันกลางไม่ใช่

วิธีวิเคราะห์จำนวนโค้ดที่ใช้ในการโหลดหน้าเว็บและส่งออกข้อมูล

  1. กด Control+Shift+P หรือ Command+Shift+P (Mac) เพื่อเปิดเมนูคำสั่ง

    เมนูคำสั่ง

    รูปที่ 7 เมนูคำสั่ง

  2. เริ่มพิมพ์ coverage เลือกแสดงความครอบคลุม แล้วกด Enter

    แสดงความครอบคลุม

    รูปที่ 8 แสดงความครอบคลุม

    แท็บความครอบคลุมจะเปิดขึ้น

    แท็บความครอบคลุม

    รูปที่ 9 แท็บความครอบคลุม

  3. คลิกโหลดซ้ำ โหลดซ้ำ DevTools โหลดหน้าเว็บซ้ำและบันทึกจำนวนโค้ดที่ใช้เทียบกับจำนวนที่จัดส่ง

  4. คลิกส่งออก ส่งออก เพื่อส่งออก เป็นไฟล์ JSON

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

ดูปัญหา Chromium #717195 เพื่อรายงานข้อบกพร่องหรือแนะนำการปรับปรุง

ไปยังส่วนต่างๆ ใน Console ด้วยแป้นพิมพ์

ตอนนี้คุณใช้แป้นพิมพ์เพื่อไปยังส่วนต่างๆ ของคอนโซลได้แล้ว ตัวอย่างมีดังนี้

การกด Shift+Tab จะโฟกัสข้อความสุดท้าย (หรือผลลัพธ์ของแอปที่ประเมิน) นิพจน์) ถ้าข้อความมีลิงก์ ระบบจะไฮไลต์ลิงก์สุดท้ายก่อน กำลังกด Enter จะเปิดลิงก์ในแท็บใหม่ การกดแป้นลูกศรซ้ายจะไฮไลต์ ข้อความทั้งหมด (ดูรูปที่ 13)

การโฟกัสลิงก์

รูปที่ 11 การโฟกัสลิงก์

การกดปุ่มลูกศรขึ้นจะโฟกัสลิงก์ถัดไป

กำลังโฟกัสลิงก์อื่น

รูปที่ 12 กำลังโฟกัสลิงก์อื่น

การกดแป้นลูกศรขึ้นอีกครั้งจะโฟกัสข้อความทั้งหมด

การโฟกัสข้อความทั้งหมด

รูปที่ 13 การโฟกัสข้อความทั้งหมด

การกดแป้นลูกศรขวาจะขยายสแต็กเทรซที่ยุบอยู่ (หรือออบเจ็กต์ อาร์เรย์ และอื่นๆ เปิด)

การขยายสแต็กเทรซที่ยุบ

รูปที่ 14 การขยายสแต็กเทรซที่ยุบ

การกดแป้นลูกศรซ้ายจะยุบข้อความหรือผลการค้นหาแบบขยาย

ดูปัญหาเกี่ยวกับ Chromium #865674 เพื่อรายงานข้อบกพร่องหรือแนะนำการปรับปรุง

เส้นอัตราส่วนคอนทราสต์ AAA ในตัวเลือกสี

ตอนนี้ตัวเลือกสีจะแสดงบรรทัดที่ 2 เพื่อระบุสีที่ตรงตามอัตราส่วนคอนทราสต์ของ AAA คำแนะนำ เรามีผลิตภัณฑ์ AA เข้ามาแล้วตั้งแต่ Chrome 65

บรรทัด AA (ด้านบน) และบรรทัด AAA (ด้านล่าง)

รูปที่ 15 บรรทัด AA (ด้านบน) และบรรทัด AAA (ด้านล่าง)

สีระหว่างเส้น 2 เส้นหมายถึงสีที่เป็นไปตามคำแนะนำของ AA แต่ไม่เป็นไปตาม AAA แนะนำ เมื่อสีเป็นไปตามคำแนะนำของ AAA สิ่งใดที่อยู่ด้านเดียวกับสีนั้น เป็นไปตามคำแนะนำด้วย เช่น ในรูปที่ 15 อะไรก็ตามที่อยู่ด้านล่างบรรทัดล่างคือ AAA และอะไรก็ตามที่อยู่เหนือขึ้นไป ไม่ตรงตามคำแนะนำของ AA

เคล็ดลับ โดยทั่วไป คุณสามารถปรับปรุงให้หน้าเว็บอ่านง่ายขึ้นได้โดยการเพิ่มปริมาณข้อความ ที่ตรงตามคำแนะนำ AAA หากปฏิบัติตามคำแนะนำของ AAA สำหรับบางคนไม่ได้ ให้พยายามทำให้เป็นไปตามคำแนะนำของ AA เป็นอย่างน้อย

ดูอัตราส่วนคอนทราสต์ในตัวเลือกสีเพื่อดูวิธีเข้าถึงฟีเจอร์นี้

ดูปัญหา Chromium #879856 เพื่อรายงานข้อบกพร่องหรือแนะนำการปรับปรุง

บันทึกการลบล้างตำแหน่งทางภูมิศาสตร์ที่กำหนดเอง

ตอนนี้แท็บเซ็นเซอร์ช่วยให้คุณบันทึกการลบล้างตำแหน่งทางภูมิศาสตร์ที่กำหนดเองได้แล้ว

  1. กด Control+Shift+P หรือ Command+Shift+P (Mac) เพื่อเปิดเมนูคำสั่ง

    เมนูคำสั่ง

    รูปที่ 16 เมนูคำสั่ง

  2. พิมพ์ sensors แล้วเลือกแสดงเซ็นเซอร์ แล้วกด Enter แท็บเซ็นเซอร์จะเปิดขึ้น

    แท็บเซ็นเซอร์

    รูปที่ 17 แท็บเซ็นเซอร์

  3. ในส่วนตำแหน่งทางภูมิศาสตร์ ให้คลิกจัดการ การตั้งค่า > ตำแหน่งทางภูมิศาสตร์จะเปิดขึ้น

    แท็บตำแหน่งทางภูมิศาสตร์ในการตั้งค่า

    รูปที่ 18 แท็บตำแหน่งทางภูมิศาสตร์ในการตั้งค่า

  4. คลิกเพิ่มสถานที่ตั้ง

  5. ป้อนชื่อสถานที่ ละติจูด และลองจิจูด แล้วคลิกเพิ่ม

    การเพิ่มตำแหน่งทางภูมิศาสตร์ที่กำหนดเอง

    รูปที่ 19 การเพิ่มตำแหน่งทางภูมิศาสตร์ที่กำหนดเอง

ดูปัญหา Chromium #649657 เพื่อรายงานข้อบกพร่องหรือแนะนำการปรับปรุง

การพับโค้ด

แผงแหล่งที่มาและเครือข่ายรองรับการยุบโค้ดแล้ว

ยุบบรรทัด 54 ถึง 65 แล้ว

รูปที่ 20 ยุบบรรทัด 54 ถึง 65 แล้ว

วิธีเปิดใช้การยุบโค้ด

  1. กด F1 เพื่อเปิดการตั้งค่า
  2. ในส่วนการตั้งค่า > ค่ากำหนด > แหล่งที่มาจะเปิดใช้การยุบโค้ด

วิธีพับบล็อกโค้ด

  1. วางเมาส์ไว้เหนือหมายเลขบรรทัดที่บล็อกเริ่มอยู่
  2. คลิกพับ ย่อ

ดูปัญหา Chromium #328431 เพื่อรายงานข้อบกพร่องหรือแนะนำการปรับปรุง

แท็บข้อความ

แท็บเฟรมเปลี่ยนชื่อเป็นแท็บข้อความ แท็บนี้ใช้ได้เฉพาะใน แผงเครือข่ายเมื่อตรวจสอบการเชื่อมต่อ Web Socket

แท็บข้อความ

รูปที่ 21 แท็บข้อความ

ดูปัญหา Chromium #802182 เพื่อรายงานข้อบกพร่องหรือแนะนำการปรับปรุง

ดาวน์โหลดเวอร์ชันตัวอย่าง

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

ติดต่อทีม Chrome DevTools

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

  • ส่งข้อเสนอแนะหรือความคิดเห็นถึงเราทาง crbug.com
  • รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ตัวเลือกเพิ่มเติม   เพิ่มเติม > ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ
  • ทวีตที่ @ChromeDevTools
  • แสดงความคิดเห็นว่ามีอะไรใหม่ในวิดีโอ YouTube เครื่องมือสำหรับนักพัฒนาเว็บ หรือวิดีโอ YouTube สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ

มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ

รายการข้อมูลทั้งหมดที่ครอบคลุมในซีรีส์มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ