การเชื่อมต่อ Workspace อัตโนมัติในเครื่องมือนักพัฒนาเว็บใน Chrome

Workspace เป็นฟีเจอร์ที่มีประสิทธิภาพซึ่งช่วยให้คุณแก้ไขไฟล์ต้นฉบับของเว็บไซต์ได้โดยตรงจากภายใน Chrome DevTools จึงไม่จำเป็นต้องสลับระหว่างตัวแก้ไขโค้ดกับเบราว์เซอร์อยู่ตลอดเวลา

ภาพรวม

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

ข้อดีของการเชื่อมต่อพื้นที่ทำงานอัตโนมัติ

การเชื่อมต่อพื้นที่ทำงานอัตโนมัติช่วยเพิ่มประสิทธิภาพการตั้งค่าพื้นที่ทำงานด้วยการขจัดการกำหนดค่าด้วยตนเอง เซิร์ฟเวอร์การพัฒนาในเครื่องสามารถระบุdevtools.jsonไฟล์พิเศษที่ Chrome DevTools ตรวจหาโดยอัตโนมัติได้ แทนที่จะเพิ่มโฟลเดอร์โปรเจ็กต์ลงใน DevTools ด้วยตนเอง ซึ่งมีประโยชน์หลายประการ ดังนี้

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

การเชื่อมต่อพื้นที่ทำงานอัตโนมัติทำงานอย่างไร

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

/.well-known/appspecific/com.chrome.devtools.json

หากเซิร์ฟเวอร์ตอบกลับด้วยไฟล์ devtools.json ที่ถูกต้อง DevTools จะใช้ข้อมูลภายในไฟล์เพื่อเชื่อมต่อกับโฟลเดอร์แหล่งที่มาของโปรเจ็กต์โดยอัตโนมัติ โดยปกติแล้วไฟล์ devtools.json จะมีข้อมูลต่อไปนี้

{
  "workspace": {
    "root": "/Users/yourname/path/to/your/project",
    "uuid": "a-random-version-4-uuid"
  }
}

• workspace.root: เส้นทางแบบสัมบูรณ์ไปยังไดเรกทอรีรูทของโปรเจ็กต์ในระบบไฟล์ในเครื่อง
• workspace.uuid: ตัวระบุที่ไม่ซ้ำกัน (UUID v4) สำหรับโปรเจ็กต์ ซึ่งจะช่วยให้ DevTools แยกแยะความแตกต่างระหว่างโปรเจ็กต์ต่างๆ ได้

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

ออกแบบมาเพื่อการพัฒนาและการแก้ไขข้อบกพร่องในเครื่อง

กลไกการค้นพบพื้นที่ทำงานอัตโนมัติผ่าน devtools.json ออกแบบมาสำหรับสภาพแวดล้อมการพัฒนาในเครื่องโดยเฉพาะ และจะทำงานได้ก็ต่อเมื่อแอปพลิเคชันของคุณแสดงจาก localhost เท่านั้น เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome จะส่ง/.well-known/appspecific/com.chrome.devtools.jsonคำขอในโหมดการพัฒนาเท่านั้นเมื่อคุณกำลังแก้ไขข้อบกพร่องของโปรเจ็กต์ในเครื่อง ฟีเจอร์นี้ไม่ได้มีไว้สำหรับสภาพแวดล้อมการใช้งานจริง

ให้สิทธิ์เข้าถึงไฟล์ในเครื่อง

Chrome กำหนดให้เว็บไซต์ต้องได้รับสิทธิ์จากผู้ใช้อย่างชัดเจนเพื่อเข้าถึงไฟล์ในเครือข่ายหรือเครื่องในระบบของคุณด้วยเหตุผลด้านความปลอดภัย เมื่อเครื่องมือสำหรับนักพัฒนาเว็บพยายามเชื่อมต่อกับโปรเจ็กต์ในเครื่องโดยใช้ devtools.json คุณจะได้รับข้อความแจ้งให้สิทธิ์ Chrome เข้าถึงไดเรกทอรีของโปรเจ็กต์ คำขอสิทธิ์นี้เป็นไปตามนโยบายการเข้าถึงเครือข่ายภายในของ Chrome ซึ่งจำกัดคำขอจากเครือข่ายสาธารณะไปยังปลายทางในเครือข่ายภายใน เว้นแต่จะได้รับสิทธิ์ ความสามารถในการขอสิทธิ์นี้จำกัดไว้เฉพาะบริบทที่ปลอดภัย (HTTPS) สำหรับการพัฒนาในเครื่อง โดยปกติแล้วหมายความว่า localhost จะถือเป็นบริบทที่ปลอดภัย

สร้างและแสดงไฟล์ devtools.json

สำหรับโปรเจ็กต์ส่วนหน้าทั่วไปที่ทำงานบนเซิร์ฟเวอร์การพัฒนาในเครื่อง คุณต้องกำหนดค่าเซิร์ฟเวอร์ให้ตอบสนองต่อคำขอ /.well-known/appspecific/com.chrome.devtools.json ด้วยเนื้อหา JSON ที่ถูกต้อง

โดยทั่วไปแล้ว คุณสามารถแก้ปัญหานี้ได้ดังนี้

1. สร้าง UUID: คุณจะต้องมี UUID v4 คุณสร้างได้โดยใช้เครื่องมือออนไลน์หรือสคริปต์
2. กำหนดรูทของโปรเจ็กต์: รับเส้นทางสัมบูรณ์ไปยังไดเรกทอรีรูทของโปรเจ็กต์
3. สร้างปลายทาง: กำหนดค่าเซิร์ฟเวอร์การพัฒนาเพื่อจัดการคำขอ GET ไปยัง /.well-known/appspecific/com.chrome.devtools.json
4. แสดง JSON: เมื่อเข้าถึงปลายทางนี้ ให้แสดงการตอบกลับ JSON พร้อมส่วนหัว Content-Type: application/json และเนื้อหา devtools.json

workspace.root ที่ระบุในไฟล์ devtools.json ต้องเป็นเส้นทางสัมบูรณ์ไปยังไดเรกทอรีรากของโปรเจ็กต์ในระบบไฟล์ในเครื่อง ซึ่งหมายความว่าเส้นทางจะแตกต่างกันไปตามระบบปฏิบัติการ (เช่น /Users/yourname/projects/my-app ใน macOS หรือ Linux หรือ C:\Users\yourname\projects\my-app ใน Windows) และการตั้งค่าโปรเจ็กต์ที่เฉพาะเจาะจง ลองเพิ่มไฟล์นี้ลงในไฟล์ที่ละเว้น (เช่น ในรายการ .gitignore) เพื่อหลีกเลี่ยงการเช็คอินไฟล์นี้สำหรับสภาพแวดล้อมเวอร์ชันที่ใช้งานจริง

คุณต้องตรวจสอบว่าเซิร์ฟเวอร์สร้างหรือแสดงเส้นทางนี้แบบไดนามิก หรือกำหนดค่าอย่างถูกต้องสำหรับสภาพแวดล้อมการพัฒนา พิจารณาเพิ่มไฟล์นี้ลงในไฟล์ที่ละเว้น (เช่น ใน.gitignore list) เพื่อหลีกเลี่ยงการเช็คอินไฟล์นี้สำหรับสภาพแวดล้อมเวอร์ชันที่ใช้งานจริง

ตัวอย่าง

คุณระบุไฟล์ devtools.json ได้หลายวิธี ทั้งนี้ขึ้นอยู่กับเทคโนโลยีที่ใช้ในโปรเจ็กต์

Node.js และ Express

สคริปต์นี้จะเรียกใช้เซิร์ฟเวอร์ Express ขั้นต่ำ โดยจะแสดงไฟล์ JSON ที่ /.well-known/appspecific/com.chrome.devtools.json ซึ่งมีเส้นทางไปยัง projectRoot. ซึ่งชี้ไปยังโฟลเดอร์ที่เซิร์ฟเวอร์ทำงาน ปรับตัวแปร projectRoot เพื่อชี้ไปยังไดเรกทอรีรากจริงของโปรเจ็กต์อย่างถูกต้อง ไม่จำเป็นต้องเป็นที่ที่สคริปต์เซิร์ฟเวอร์อยู่

const express = require('express');
const path = require('path');
const { v4: uuidv4 } = require('uuid');

const app = express();
const port = 3000;

if (process.env.NODE_ENV !== 'production') {
  app.get('/.well-known/appspecific/com.chrome.devtools.json', (req, res) => {
    const projectRoot = path.resolve(__dirname);
    const workspaceUuid = uuidv4();

    res.json({
      workspace: {
        root: projectRoot,
        uuid: workspaceUuid,
      },
    });
  });
}

app.listen(port, () => {
  console.log(`Development server listening at http://localhost:${port}`);
});

ใช้สคริปต์ devtools-json-generator

คุณใช้ generate-devtools-json เพื่อสร้าง devtools.json ให้ได้

หากต้องการสร้างไฟล์ devtools.json ในไดเรกทอรีปัจจุบัน ให้เรียกใช้คำสั่งต่อไปนี้

npx generate-devtools-json

หรือหากต้องการสร้างไฟล์ในไดเรกทอรีที่เฉพาะเจาะจง ให้ส่งไดเรกทอรีเป็นอาร์กิวเมนต์

npx generate-devtools-json /path/to/your/project

อ่านเพิ่มเติมเกี่ยวกับ devtools-json-generator ในหน้าแรกของโปรเจ็กต์

การผสานรวม

เฟรมเวิร์กส่วนหน้าและเครื่องมือบิลด์บางอย่างมีปลั๊กอินหรือการกำหนดค่าเพื่อลดความซับซ้อนของกระบวนการนี้

Vite

สำหรับโปรเจ็กต์ที่ใช้ Vite (รวมถึง SvelteKit) vite-plugin-devtools-json คือโซลูชัน ระบบจะสร้างและแสดงไฟล์ devtools.json โดยอัตโนมัติในทันที

หากต้องการใช้ ให้ติดตั้งปลั๊กอินโดยทำดังนี้

npm install -D vite-plugin-devtools-json

จากนั้นเพิ่มลงใน vite.config.js (หรือ vite.config.ts) โดยทำดังนี้

// vite.config.js
import { defineConfig } from 'vite';
import devtoolsJson from 'vite-plugin-devtools-json';

export default defineConfig({
  plugins: [
    devtoolsJson({
      // Optional: specify a custom root path if different from Vite's root
      // root: '/path/to/your/project/root',
    }),
  ],
});

Angular

หากคุณใช้ ng serve เพื่อเรียกใช้โปรเจ็กต์ Angular ในเครื่อง (และ @angular/cli เวอร์ชันของคุณเป็น 19.0.0 ขึ้นไป) Angular CLI จะมีมิดเดิลแวร์ที่แสดงไฟล์ devtools.json ที่ถูกต้องให้คุณโดยอัตโนมัติ

เช่น หากต้องการสร้างและเรียกใช้แอปพลิเคชันใหม่ ให้ทำดังนี้

npm install -g @angular/cli
ng new my-first-angular-app
ng serve

เมื่อไปที่ https://localhost:4200/.well-known/appspecific/com.chrome.devtools.json คุณจะเห็นไฟล์ JSON ที่สร้างขึ้น

การแก้ปัญหา

คุณสามารถแก้ปัญหาทั่วไปเกี่ยวกับการเชื่อมต่อพื้นที่ทำงานอัตโนมัติได้โดยทำตามเคล็ดลับในส่วนนี้

นำโฟลเดอร์ออกจากพื้นที่ทำงาน

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

• เปิด Chrome DevTools
• ไปที่แท็บแหล่งที่มา
• เลือกแท็บย่อยพื้นที่ทำงานในแผงด้านซ้าย
• คลิกขวาที่โฟลเดอร์โปรเจ็กต์ที่ไม่ต้องการ แล้วเลือกนำออกจากพื้นที่ทำงาน

ไม่สนใจข้อผิดพลาด 404 ในเซิร์ฟเวอร์

หากไม่ต้องการใช้ฟีเจอร์นี้กับโปรเจ็กต์ใดโปรเจ็กต์หนึ่งและเห็นข้อผิดพลาด 404 สำหรับคำขอ /.well-known/appspecific/com.chrome.devtools.json ในบันทึกเซิร์ฟเวอร์ คุณก็ไม่ต้องสนใจข้อผิดพลาดเหล่านี้ คำขอจะไม่มีผลหากไม่มีการแสดงไฟล์ หรือจะกำหนดค่าเซิร์ฟเวอร์ให้ตอบกลับด้วยสถานะ 404 สำหรับเส้นทางที่เฉพาะเจาะจงนี้โดยไม่ต้องบันทึกข้อผิดพลาดก็ได้

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

หากต้องการปิดใช้ฟีเจอร์การค้นพบพื้นที่ทำงานอัตโนมัติในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome คุณต้องตั้งค่า Chrome Flag ที่เหมาะสม ดังนี้

• เปิด Chrome แล้วไปที่ chrome://flags
• ค้นหา "DevTools Project Settings" แล้วตั้งค่าเป็นปิดใช้
• นอกจากนี้ คุณอาจเห็นฟีเจอร์ที่เกี่ยวข้องชื่อ "โฟลเดอร์พื้นที่ทำงานอัตโนมัติของ DevTools" และปิดใช้ได้เช่นกัน
• เปิด Chrome อีกครั้งเพื่อให้การเปลี่ยนแปลงมีผล

สรุป

การทำความเข้าใจและใช้devtools.jsonกลไกนี้จะช่วยเพิ่มประสิทธิภาพเวิร์กโฟลว์การพัฒนาในเครื่องด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ได้อย่างมาก