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

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

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

จุดตรวจสอบ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ผลลัพธ์ของนิพจน์จุดตรวจสอบในคอนโซล

รูปที่ 5 ผลลัพธ์ของนิพจน์จุดตรวจสอบในคอนโซล

ดูปัญหา 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. คลิกโหลดซ้ำ โหลดซ้ำ เครื่องมือสำหรับนักพัฒนาเว็บจะโหลดหน้าเว็บซ้ำและบันทึกจำนวนโค้ดที่ใช้เทียบกับจำนวนการจัดส่ง

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

แท็บข้อความ

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

แท็บข้อความ

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

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

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

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

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

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

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

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

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

ยกเลิก Chrome 82 แล้ว

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59