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

Kayce Basques

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

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

จุดตรวจสอบ

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

วิธีเพิ่มจุดบันทึก

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

   

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

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

   

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

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

   

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

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

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

   

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

เมื่อบรรทัดดังกล่าวทำงานในครั้งถัดไป DevTools จะบันทึกผลลัพธ์ของนิพจน์ 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

รูปที่ 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 เพื่อรายงานข้อบกพร่องหรือแนะนำการปรับปรุง

การยุบโค้ด

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

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

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

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

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

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

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

แท็บข้อความ

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

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

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

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

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

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

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

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

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

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