Chrome DevTools में Workspace से अपने-आप कनेक्ट होने की सुविधा

Ewa Gasperowicz
X

Workspace एक बेहतरीन सुविधा है. इसकी मदद से, Chrome DevTools में ही अपनी वेबसाइट की सोर्स फ़ाइलों में सीधे तौर पर बदलाव किया जा सकता है. इससे आपको अपने कोड एडिटर और ब्राउज़र के बीच बार-बार स्विच करने की ज़रूरत नहीं पड़ती.

खास जानकारी

Chrome DevTools में मौजूद Workspace, वेब सर्वर से दिखाई गई फ़ाइलों को आपके कंप्यूटर पर मौजूद किसी लोकल फ़ोल्डर में मौजूद फ़ाइलों से मैप करता है. किसी लोकल प्रोजेक्ट के लिए फ़ाइल फ़ोल्डर की सुविधा चालू करने पर, DevTools के सोर्स पैनल में मौजूद फ़ाइलों में किए गए बदलाव, आपके लोकल प्रोजेक्ट की फ़ाइलों में अपने-आप सेव हो जाते हैं. इससे आपको आसानी से बदलाव करने का अनुभव मिलता है. इससे ऐसा लगता है कि आप सीधे अपने प्रोजेक्ट के कोडबेस पर काम कर रहे हैं. साथ ही, आपको DevTools से रीयल-टाइम में अहम जानकारी मिलती है.

वर्कस्पेस अपने-आप कनेक्ट होने की सुविधा के फ़ायदे

वर्कस्पेस को अपने-आप कनेक्ट करने की सुविधा से, वर्कस्पेस को सेट अप करने की प्रोसेस बेहतर हो जाती है. ऐसा इसलिए, क्योंकि इसमें मैन्युअल कॉन्फ़िगरेशन की ज़रूरत नहीं होती. DevTools में प्रोजेक्ट फ़ोल्डर मैन्युअल तरीके से जोड़ने के बजाय, आपका लोकल डेवलपमेंट सर्वर एक खास devtools.json फ़ाइल उपलब्ध करा सकता है. Chrome DevTools इस फ़ाइल का अपने-आप पता लगा लेता है. इससे कई फ़ायदे मिलते हैं:

  • तेज़ी से डीबग करना: DevTools में फ़ाइलों में बदलाव करें और ब्राउज़र छोड़े बिना या मैन्युअल तरीके से सेव किए बिना, अपडेट तुरंत देखें.
  • रीयल-टाइम में बदलाव: बदलाव आपकी लोकल फ़ाइलों और ब्राउज़र में तुरंत दिखते हैं. इससे डेवलपमेंट की स्पीड बढ़ती है.
  • मैन्युअल तरीके से सेटअप करने की ज़रूरत नहीं: यह प्रोजेक्ट फ़ाइलों की मैपिंग को अपने-आप पूरा करता है. इससे सेटअप करने में लगने वाला समय कम हो जाता है. खास तौर पर, नए प्रोजेक्ट के लिए या टीम के सदस्यों को शामिल करते समय.

वर्कस्पेस अपने-आप कनेक्ट होने की सुविधा कैसे काम करती है?

ऑटोमैटिक वर्कस्पेस कनेक्शन की सुविधा, आपके लोकल डेवलपमेंट सर्वर पर काम करती है. यह सर्वर, पहले से तय किए गए पाथ पर एक खास JSON फ़ाइल को दिखाता है. Chrome DevTools खुला होने पर, अगर 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: आपके प्रोजेक्ट के लिए यूनीक आइडेंटिफ़ायर (यूयूआईडी v4). इससे DevTools को अलग-अलग प्रोजेक्ट के बीच अंतर करने में मदद मिलती है.

DevTools को यह फ़ाइल मिलने और इसे प्रोसेस करने के बाद, यह सोर्स > वर्कस्पेस पैनल में कनेक्ट करें बटन दिखाता है.

इसे स्थानीय डेवलपमेंट और डीबग करने के लिए डिज़ाइन किया गया है

devtools.json के ज़रिए वर्कस्पेस का अपने-आप पता लगाने की सुविधा, खास तौर पर लोकल डेवलपमेंट एनवायरमेंट के लिए डिज़ाइन की गई है. यह सुविधा सिर्फ़ तब काम करती है, जब आपका ऐप्लिकेशन localhost से दिखाया जाता है. Chrome DevTools, /.well-known/appspecific/com.chrome.devtools.json अनुरोध सिर्फ़ डेवलपमेंट मोड में भेजता है. ऐसा तब होता है, जब किसी लोकल प्रोजेक्ट को डीबग किया जा रहा हो. इस सुविधा का इस्तेमाल प्रोडक्शन एनवायरमेंट के लिए नहीं किया जा सकता.

लोकल फ़ाइलें ऐक्सेस करने की अनुमति देना

सुरक्षा कारणों से, Chrome को किसी वेबसाइट के लिए उपयोगकर्ता की अनुमति चाहिए, ताकि वह आपके लोकल नेटवर्क या मशीन पर मौजूद फ़ाइलों को ऐक्सेस कर सके. जब DevTools, devtools.json का इस्तेमाल करके आपके लोकल प्रोजेक्ट से कनेक्ट करने की कोशिश करता है, तब आपको Chrome को अपने प्रोजेक्ट की डायरेक्ट्री ऐक्सेस करने की अनुमति देने के लिए कहा जाएगा. अनुमति पाने के लिए किया गया यह अनुरोध, Chrome के लोकल नेटवर्क के ऐक्सेस से जुड़ी नीतियों के मुताबिक है. इन नीतियों के तहत, सार्वजनिक नेटवर्क से लोकल डेस्टिनेशन को ऐक्सेस करने के अनुरोधों पर पाबंदी लगाई जाती है. हालांकि, अनुमति मिलने पर ऐसा किया जा सकता है. इस अनुमति का अनुरोध सिर्फ़ सुरक्षित कॉन्टेक्स्ट (एचटीटीपीएस) में किया जा सकता है. लोकल डेवलपमेंट के लिए, इसका मतलब आम तौर पर यह होता है कि localhost को सुरक्षित कॉन्टेक्स्ट माना जाता है.

devtools.json फ़ाइल बनाना और उसे दिखाना

लोकल डेवलपमेंट सर्वर पर चल रहे किसी सामान्य फ़्रंटएंड प्रोजेक्ट के लिए, आपको अपने सर्वर को कॉन्फ़िगर करना होगा. इससे वह /.well-known/appspecific/com.chrome.devtools.json अनुरोध का जवाब सही JSON कॉन्टेंट के साथ दे पाएगा.

इस समस्या को हल करने का सामान्य तरीका यहां बताया गया है:

  1. यूयूआईडी जनरेट करें: आपको यूयूआईडी v4 की ज़रूरत होगी. ऑनलाइन टूल या स्क्रिप्ट का इस्तेमाल करके, इसे जनरेट किया जा सकता है.
  2. प्रोजेक्ट रूट का पता लगाना: अपने प्रोजेक्ट की रूट डायरेक्ट्री का पूरा पाथ पाएं.
  3. एंडपॉइंट बनाएं: अपने डेवलपमेंट सर्वर को कॉन्फ़िगर करें, ताकि वह /.well-known/appspecific/com.chrome.devtools.json पर GET अनुरोधों को हैंडल कर सके.
  4. JSON दिखाना: जब इस एंडपॉइंट को हिट किया जाता है, तब Content-Type: application/json हेडर और devtools.json कॉन्टेंट के साथ JSON रिस्पॉन्स दिखाएं.

आपकी devtools.json फ़ाइल में बताया गया workspace.root पाथ, लोकल फ़ाइल सिस्टम पर आपके प्रोजेक्ट की रूट डायरेक्ट्री का ऐब्सलूट पाथ होना चाहिए. इसका मतलब है कि आपका पाथ, आपके ऑपरेटिंग सिस्टम (उदाहरण के लिए, macOS या Linux पर /Users/yourname/projects/my-app या Windows पर C:\Users\yourname\projects\my-app) और आपके प्रोजेक्ट के सेटअप के हिसाब से अलग-अलग होगा. इस फ़ाइल को अनदेखा की गई फ़ाइलों में जोड़ें. उदाहरण के लिए, .gitignore सूची में जोड़ें, ताकि प्रोडक्शन एनवायरमेंट के लिए इस फ़ाइल की जांच न की जाए.

यह ज़रूरी है कि आपका सर्वर इस पाथ को डाइनैमिक तरीके से जनरेट करे या दिखाए. इसके अलावा, यह भी ज़रूरी है कि आप इसे अपने डेवलपमेंट एनवायरमेंट के लिए सही तरीके से कॉन्फ़िगर करें. इस फ़ाइल को अनदेखा की गई फ़ाइलों (उदाहरण के लिए, .gitignore सूची) में जोड़ें, ताकि प्रोडक्शन एनवायरमेंट के लिए इस फ़ाइल की जांच न की जाए.

उदाहरण

अपने प्रोजेक्ट के टेक्नोलॉजी स्टैक के हिसाब से, devtools.json फ़ाइल देने के कई तरीके हैं.

Node.js और Express

यह स्क्रिप्ट, कम से कम Express सर्वर चलाती है. यह /.well-known/appspecific/com.chrome.devtools.json पर एक 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

अगर Angular प्रोजेक्ट को स्थानीय तौर पर चलाने के लिए ng serve का इस्तेमाल किया जाता है और ng serve का वर्शन कम से कम 19.0.0 है, तो Angular CLI एक मिडलवेयर उपलब्ध कराता है. यह मिडलवेयर, आपके लिए सही devtools.json फ़ाइल अपने-आप उपलब्ध कराता है.@angular/cli

उदाहरण के लिए, नया ऐप्लिकेशन बनाने और उसे चलाने के लिए:

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

https://localhost:4200/.well-known/appspecific/com.chrome.devtools.json पर जाकर, जनरेट की गई JSON फ़ाइल देखी जा सकती है.

समस्या का हल

इस सेक्शन में दी गई सलाह का पालन करके, वर्कस्पेस से अपने-आप कनेक्ट होने की सुविधा से जुड़ी सामान्य समस्याएं हल की जा सकती हैं.

Workspaces से किसी फ़ोल्डर को हटाना

अगर कोई प्रोजेक्ट फ़ोल्डर पहले से ही अपने-आप कनेक्ट हो गया है, तो उसे DevTools वर्कस्पेस की सेटिंग से मैन्युअल तरीके से हटाया जा सकता है:

  • Chrome DevTools खोलें.
  • सोर्स टैब पर जाएं.
  • बाईं ओर मौजूद पैनल में, वर्कस्पेस सब-टैब चुनें.
  • जिस प्रोजेक्ट फ़ोल्डर को हटाना है उस पर राइट क्लिक करें और Workspace से हटाएं को चुनें.

सर्वर पर मौजूद 404 गड़बड़ियों को अनदेखा करें

अगर आपको किसी प्रोजेक्ट के लिए इस सुविधा का इस्तेमाल नहीं करना है और आपको अपने सर्वर लॉग में /.well-known/appspecific/com.chrome.devtools.json अनुरोध के लिए 404 गड़बड़ियां दिखती हैं, तो इन गड़बड़ियों को अनदेखा किया जा सकता है. अगर फ़ाइल नहीं दिखाई जाती है, तो अनुरोध से कोई नुकसान नहीं होता. इसके अलावा, अपने सर्वर को इस तरह कॉन्फ़िगर किया जा सकता है कि वह इस पाथ के लिए 404 स्टेटस के साथ जवाब दे. हालांकि, ऐसा करने पर गड़बड़ी लॉग नहीं होगी.

Chrome DevTools में इस सुविधा को बंद करने का तरीका

अगर आपको Chrome DevTools में, वर्कस्पेस अपने-आप खोजने की सुविधा बंद करनी है, तो आपको सही Chrome फ़्लैग सेट करना होगा:

  • Chrome खोलें और chrome://flags पर जाएं.
  • "DevTools प्रोजेक्ट सेटिंग" खोजें और इसे बंद है पर सेट करें.
  • आपको "DevTools के वर्कस्पेस फ़ोल्डर अपने-आप बनने की सुविधा" नाम का फ़्लैग भी दिख सकता है. इसे भी बंद किया जा सकता है.
  • बदलावों को लागू करने के लिए, Chrome को फिर से लॉन्च करें.

खास जानकारी

devtools.json मेकेनिज़्म को समझकर और उसका इस्तेमाल करके, Chrome DevTools की मदद से लोकल डेवलपमेंट के वर्कफ़्लो को बेहतर बनाया जा सकता है.