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 bir çalışma alanı, 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şayabilirsiniz.
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: Dosyaları DevTools'da 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 dahil ederken 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 belirli bir JSON dosyasını önceden tanımlanmış bir yolda 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
Güvenlik nedeniyle Chrome, 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 değerlendirildiği anlamına gelir.
devtools.json dosyası oluşturma ve yayınlama
Yerel 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.jsoniçin GET isteklerini işleyecek şekilde yapılandırın. - JSON'u sunun: Bu uç nokta kullanıldığında
Content-Type: application/jsonüstbilgisine vedevtools.jsoniçeriğine sahip bir JSON yanıtı sunun.
devtools.json dosyanızda belirtilen workspace.root yolu, yerel dosya sistemindeki projenizin kök dizinine ait 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 bağlı olarak değişir. Üretim ortamında bu dosyanın kontrol edilmesini önlemek için 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 adresinde, 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 şu komutu ç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) hesabınıza 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 @angular/cli sürümünüz en az 19.0.0 ise) Angular CLI, sizin için doğru devtools.json dosyasını otomatik olarak sunan ara yazılım sağlar.
Ö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ü zaten otomatik olarak bağlanmışsa 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ığı sürece 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://flagssimgesine gidin. - "DevTools Project Settings"i arayın ve Disabled (Devre Dışı) olarak ayarlayın.
- "DevTools Automatic Workspace Folders" (Geliştirici 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.