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

Kayce Basques

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

บันทึกประจำรุ่นฉบับวิดีโอ

จุดตรวจสอบ

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

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

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

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

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

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

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

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

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

    การพิมพ์นิพจน์ Logpoint

    รูปที่ 3 การพิมพ์นิพจน์ Logpoint

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

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

    ป้าย Logpoint สีส้มในบรรทัด 174

    รูปที่ 4 ป้าย Logpoint สีส้มในบรรทัด 174

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

ผลลัพธ์ของนิพจน์ 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 ซึ่งเป็นเครื่องมือการทำงานอัตโนมัติของเบราว์เซอร์ที่ทีม DevTools ดูแลรักษา ดูการครอบคลุม

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

ไปยังส่วนต่างๆ ของคอนโซลด้วยแป้นพิมพ์

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

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

โฟกัสลิงก์

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

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

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

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

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

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

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

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

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

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

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

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

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

ตอนนี้เครื่องมือเลือกสีจะแสดงบรรทัดที่สองเพื่อระบุสีที่เป็นไปตามคำแนะนำอัตราส่วนคอนทราสต์ 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. คลิกFold ย่อ

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

แท็บข้อความ

เปลี่ยนชื่อแท็บเฟรมเป็นแท็บข้อความ แท็บนี้จะอยู่ในแผงเครือข่ายเมื่อตรวจสอบการเชื่อมต่อเว็บโซケットเท่านั้น

แท็บข้อความ

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

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

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

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

ติดต่อทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

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

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

รายการทุกอย่างที่ครอบคลุมในชุดมีอะไรใหม่ใน DevTools