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

Kayce Basques

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

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

จุดตรวจสอบ

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

วิธีเพิ่ม Logpoint

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

   

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

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

   

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

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

   

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

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

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

   

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

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

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

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

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

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

รูปที่ 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 ที่ DevTools วิเคราะห์ 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 ดูแล ดูการครอบคลุม

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ตอนนี้ตัวเลือกสีจะแสดงบรรทัดที่ 2 เพื่อระบุว่าสีใดเป็นไปตามคำแนะนำอัตราส่วนคอนทราสต์ AAA บรรทัด AA มีมาตั้งแต่ Chrome 65

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

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

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

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

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

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

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

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

   

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

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

   

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

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

   

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

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

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

   

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

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

การยุบโค้ด

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

รูปที่ 20 บรรทัดที่ 54 ถึง 65 ถูกพับ

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

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

วิธียุบบล็อกโค้ด

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

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

แท็บข้อความ

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

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

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

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

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

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

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

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

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

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