Bu sayfa, Cloud Translation API ile çevrilmiştir.

Chrome Geliştirici Araçları'nda otomatik Workspace bağlantısı

Ewa Gasperowicz

Workspace, web sitenizin kaynak dosyalarını doğrudan Chrome Geliştirici Araçları'ndan düzenlemenize olanak tanıyan güçlü bir özelliktir. Bu sayede, kod düzenleyiciniz ile tarayıcı arasında sürekli olarak geçiş yapmanız gerekmez.

Genel Bakış

Chrome Geliştirici Araçları'ndaki Workspace, bir web sunucusu tarafından sunulan dosyaları bilgisayarınızdaki yerel bir klasördeki dosyalarla eşler. Bir çalışma alanını yerel bir proje için etkinleştirdiğinizde, DevTools'un Kaynaklar panelindeki dosyalarda yaptığınız tüm değişiklikler otomatik olarak yerel proje dosyalarınıza kaydedilir. Bu sayede, DevTools'un anlık analizlerinden yararlanırken doğrudan projenizin kod tabanında çalışıyormuş gibi sorunsuz bir düzenleme deneyimi yaşarsınız.

Otomatik çalışma alanı bağlantısının avantajları

Otomatik çalışma alanı bağlantısı, manuel yapılandırmayı ortadan kaldırarak çalışma alanı kurulumunu kolaylaştırır. Proje klasörlerini Geliştirme Araçları'na manuel olarak eklemek yerine yerel geliştirme sunucunuz, Chrome Geliştirme Araçları'nın otomatik olarak algıladığı özel bir devtools.json dosyası sağlayabilir. Bu durum şu avantajları sunar:

Daha hızlı hata ayıklama: DevTools'da dosyaları düzenleyin ve tarayıcıdan çıkmadan veya manuel olarak kaydetmeden güncellemeleri anında görün.
Anlık değişiklikler: Değişiklikler yerel dosyalarınıza ve tarayıcıya anında yansıtılarak geliştirme hızı artırılır.
Manuel kurulum yok: Proje dosyalarının eşlenmesini otomatikleştirerek kurulum süresini kısaltır. Bu özellik özellikle yeni projelerde veya ekip üyelerini işe alırken faydalıdır.

Otomatik çalışma alanı bağlantısının işleyiş şekli

Otomatik çalışma alanı bağlantısı, yerel geliştirme sunucunuzun önceden tanımlanmış bir yolda belirli bir JSON dosyasını kullanıma sunmasıyla çalışır. Chrome Geliştirici Araçları açıkken localhost adresinden sunulan bir web sitesinde gezinirken otomatik olarak şu adrese istek gönderilir:

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

Sunucunuz geçerli bir devtools.json dosyasıyla yanıt verirse DevTools, projenizin kaynak klasörlerine otomatik olarak bağlanmak için bu dosyadaki bilgileri kullanır. devtools.json dosyası genellikle şunları içerir:

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

workspace.root: Projenizin yerel dosya sisteminizdeki kök dizinine giden mutlak yol.
workspace.uuid: Projeniz için benzersiz bir tanımlayıcı (UUID v4). Bu, DevTools'un farklı projeleri ayırt etmesine yardımcı olur.

Geliştirici Araçları bu dosyayı alıp işledikten sonra Kaynaklar > Çalışma alanları panelinde Bağlan düğmesi gösterir.

Yerel geliştirme ve hata ayıklama için tasarlandı

devtools.json üzerinden otomatik çalışma alanı keşfi mekanizması yalnızca yerel geliştirme ortamları için tasarlanmıştır ve yalnızca uygulamanız localhost üzerinden sunulduğunda çalışır. Chrome Geliştirici Araçları, yerel bir projede hata ayıklarken /.well-known/appspecific/com.chrome.devtools.json isteğini yalnızca geliştirme modunda gönderir. Bu özellik, üretim ortamları için tasarlanmamıştır.

Yerel dosyalara erişim izni verme

Chrome, güvenlik nedeniyle bir web sitesinin yerel ağınızdaki veya makinenizdeki dosyalara erişmesi için kullanıcının açık iznini gerektirir. Geliştirici Araçları, devtools.json kullanarak yerel projenize bağlanmaya çalıştığında Chrome'un projenizin dizinine erişmesine izin vermeniz istenir. Bu izin isteği, izin verilmediği sürece herkese açık ağlardan yerel hedeflere yapılan istekleri kısıtlayan Chrome'un yerel ağ erişimi politikalarına uygundur. Bu izni isteme özelliği güvenli bağlamlarla (HTTPS) sınırlıdır. Yerel geliştirme için bu genellikle localhost öğesinin güvenli bağlam olarak ele alındığı anlamına gelir.

`devtools.json` dosyası oluşturma ve yayınlama

Yerel bir geliştirme sunucusunda çalışan tipik bir ön uç projesi için sunucunuzu /.well-known/appspecific/com.chrome.devtools.json isteğine doğru JSON içeriğiyle yanıt verecek şekilde yapılandırmanız gerekir.

Bu konuda genel olarak şu yaklaşımı benimseyebilirsiniz:

UUID oluşturun: UUID v4'e ihtiyacınız vardır. Online araçlar veya bir senaryo kullanarak oluşturabilirsiniz.
Proje kökünü belirleme: Projenizin kök dizininin tam yolunu alın.
Uç nokta oluşturma: Geliştirme sunucunuzu, /.well-known/appspecific/com.chrome.devtools.json için GET isteklerini işleyecek şekilde yapılandırın.
JSON'u sunun: Bu uç nokta kullanıldığında Content-Type: application/json üstbilgisi ve devtools.json içeriğiyle bir JSON yanıtı sunun.

devtools.json dosyanızda belirtilen workspace.root yolu, yerel dosya sistemindeki proje kök dizininize ait bir mutlak yol olmalıdır. Bu nedenle, yol işletim sisteminize (örneğin, macOS veya Linux'ta /Users/yourname/projects/my-app ya da Windows'da C:\Users\yourname\projects\my-app) ve belirli proje kurulumunuza göre değişir. Üretim ortamı için bu dosyanın kontrol edilmesini önlemek üzere yoksayılan dosyalarınıza (ör. .gitignore listesine) ekleyebilirsiniz.

Sunucunuzun bu yolu dinamik olarak oluşturması veya sunması ya da geliştirme ortamınız için doğru şekilde yapılandırmanız önemlidir. Üretim ortamında bu dosyanın kontrol edilmesini önlemek için yoksayılan dosyalarınıza (örneğin, .gitignore listesine) ekleyebilirsiniz.

Örnekler

Projenizin teknoloji yığınına bağlı olarak devtools.json dosyası sağlamanın birçok yolu vardır.

Node.js ve Express

Bu komut dosyası, minimum düzeyde bir Express sunucusu çalıştırır. /.well-known/appspecific/com.chrome.devtools.json konumunda, projectRoot. yolunu içeren bir JSON dosyası sunar. Sunucunun çalıştırıldığı klasörü gösterir. projectRoot değişkenini, sunucu komut dosyanızın bulunduğu yere değil, projenizin gerçek kök dizinine doğru şekilde işaret edecek şekilde ayarlayın.

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` komut dosyasını kullanma

generate-devtools-json kullanarak sizin için devtools.json oluşturabilirsiniz.

Geçerli dizinde devtools.json dosyasını oluşturmak için şunu çalıştırın:

npx generate-devtools-json

Dilerseniz dosyayı belirli bir dizinde oluşturmak için dizini bağımsız değişken olarak iletin:

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

Projenin ana sayfasında devtools-json-generator hakkında daha fazla bilgi edinin.

Entegrasyonlar

Bazı ön uç çerçeveleri ve derleme araçları, bu süreci basitleştirmek için eklentiler veya yapılandırmalar sunar.

Vite

Vite tabanlı projeler (SvelteKit dahil) için vite-plugin-devtools-json bir çözümdür. devtools.json dosyasının anında oluşturulmasını ve yayınlanmasını otomatikleştirir.

Kullanmak için eklentiyi yükleyin:

npm install -D vite-plugin-devtools-json

Ardından, vite.config.js (veya vite.config.ts) öğenize ekleyin:

// 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 projenizi yerel olarak çalıştırmak için ng serve kullanıyorsanız (ve ng serve sürümünüz en az 19.0.0 ise) Angular CLI, doğru devtools.json dosyasını sizin için otomatik olarak sunan ara yazılım sağlar.@angular/cli

Örneğin, yeni bir uygulama oluşturup çalıştırmak için:

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

https://localhost:4200/.well-known/appspecific/com.chrome.devtools.json adresine gittiğinizde oluşturulan JSON dosyasını görebilirsiniz.

Sorun giderme

Bu bölümdeki ipuçlarını uygulayarak otomatik çalışma alanı bağlantısıyla ilgili yaygın sorunları çözebilirsiniz.

Çalışma alanlarından klasör kaldırma

Bir proje klasörü daha önce otomatik olarak bağlandıysa bunu Geliştirici Araçları çalışma alanı ayarlarınızdan manuel olarak kaldırabilirsiniz:

Chrome Geliştirici Araçları'nı açın.
Kaynaklar sekmesine gidin.
Soldaki panelde Çalışma alanları alt sekmesini seçin.
İstemediğiniz proje klasörünü sağ tıklayın ve Çalışma alanından kaldır'ı seçin.

Sunucudaki 404 hatalarını yoksayma

Belirli bir proje için bu özelliği kullanmak istemiyorsanız ve sunucu günlüklerinizde /.well-known/appspecific/com.chrome.devtools.json isteğiyle ilgili 404 hataları görüyorsanız bu hataları yoksayabilirsiniz. Dosya sunulmadığında istek zararsızdır. Alternatif olarak, sunucunuzu bu belirli yol için hata günlüğe kaydetmeden 404 durumuyla yanıt verecek şekilde yapılandırabilirsiniz.

Bu özelliği Chrome Geliştirici Araçları'nda devre dışı bırakma

Chrome Geliştirici Araçları'nda otomatik çalışma alanı keşfi özelliğini devre dışı bırakmanız gerekiyorsa uygun Chrome flag'ini ayarlamanız gerekir:

Chrome'u açıp chrome://flags simgesine gidin.
"DevTools Project Settings"i arayın ve Disabled (Devre Dışı) olarak ayarlayın.
"DevTools Automatic Workspace Folders" (Geliştirme Araçları Otomatik Çalışma Alanı Klasörleri) adlı ilgili bir işaret de bulabilirsiniz. Bu işareti de devre dışı bırakabilirsiniz.
Değişikliklerin geçerli olması için Chrome'u yeniden başlatın.

Özet

devtools.json mekanizmasını anlayıp kullanarak Chrome Geliştirici Araçları ile yerel geliştirme iş akışınızı önemli ölçüde iyileştirebilirsiniz.