Debugging

Bu belgede, VS Code hata ayıklayıcısını veya Chrome DevTools kullanarak Next.js ön uç ve arka uç kodunuzda tam kaynak eşleme desteği ile nasıl hata ayıklayabileceğiniz açıklanmaktadır.

Node.js'ye bağlanabilen herhangi bir hata ayıklayıcı, bir Next.js uygulamasında hata ayıklamak için de kullanılabilir. Node.js Hata Ayıklama Kılavuzu'nda daha fazla ayrıntı bulabilirsiniz .

Debugging with VS Code

Projenizin kök dizininde aşağıdaki içeriğe sahip .vscode/launch.json adlı bir dosya oluşturun:

launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "serverReadyAction": {
        "pattern": "- Local:.+(https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    }
  ]
}

npm run dev Yarn kullanıyorsanız yarn dev veya pnpm kullanıyorsanız pnpm dev ile değiştirilebilir.

Uygulamanızın başladığı bağlantı noktası numarasını değiştiriyorsanız, http://localhost:3000 adresindeki 3000 yerine kullandığınız bağlantı noktasını yazın.

Next.js'yi root dışında bir dizinden çalıştırıyorsanız (örneğin, Turborepo kullanıyorsanız), sunucu tarafı ve tam yığın hata ayıklama görevlerine cwd adresini eklemeniz gerekir. Örneğin, "cwd": "${workspaceFolder}/apps/web".

Şimdi Hata Ayıklama paneline gidin (Windows/Linux'taCtrl+Shift+D, macOS'ta ⇧+⌘+D ), bir başlatma yapılandırması seçin, ardından F5 tuşuna basın veya Hata Ayıklama 'yı seçin: Hata ayıklama oturumunuzu başlatmak için Komut Paletinden Hata Ayıklamayı Başlat 'ı seçin.

Using the Debugger in Jetbrains WebStorm

Çalışma zamanı yapılandırmasını listeleyen açılır menüye tıklayın ve Edit Configurations... öğesine tıklayın. URL olarak http://localhost:3000 ile bir Javascript Debug hata ayıklama yapılandırması oluşturun. İsteğinize göre özelleştirin (örn. hata ayıklama için tarayıcı, proje dosyası olarak sakla) ve OK öğesine tıklayın. Bu hata ayıklama yapılandırmasını çalıştırın ve seçilen tarayıcı otomatik olarak açılmalıdır. Bu noktada, hata ayıklama modunda 2 uygulamanız olmalıdır: NextJS düğüm uygulaması ve istemci/tarayıcı uygulaması.

Debugging with Chrome DevTools

Client-side code

Geliştirme sunucunuzu her zamanki gibi next dev, npm run dev veya yarn dev çalıştırarak başlatın. Sunucu başladığında, Chrome'da http://localhost:3000 adresini (veya alternatif URL'nizi) açın. Ardından, Chrome'un Geliştirici Araçları'nı açın (Windows/Linux'taCtrl+Shift+J, macOS'ta ⌥+⌘+I ), ardından Kaynaklar sekmesine gidin.

Şimdi, istemci tarafı kodunuz bir debugger deyimine tıkladığınızda kod yürütme duraklayacak ve bu dosya hata ayıklama alanında görünecektir. Bir dosyayı aramak ve kesme noktalarını manuel olarak ayarlamak için Windows/Linux üzerinde Ctrl+P veya macOS üzerinde ⌘+P tuşuna da basabilirsiniz. Burada arama yaparken, kaynak dosyalarınızın webpack://_N_E/./ ile başlayan yollara sahip olacağını unutmayın.

Server-side code

Chrome DevTools ile sunucu tarafı Next.js kodunda hata ayıklamak için --inspect bayrağını temel Node.js sürecine gönderir:

Terminal
NODE_OPTIONS='--inspect' next dev

Eğer npm run dev veya yarn dev kullanıyorsanız, package.json adresindeki dev betiğini güncellemeniz gerekir:

package.json
{
  "scripts": {
    "dev": "NODE_OPTIONS='--inspect' next dev"
  }
}

Next.js dev sunucusu --inspect bayrağı ile başlatıldığında aşağıdaki gibi görünecektir:

Terminal
Debugger listening on ws://127.0.0.1:9229/0cf90313-350d-4466-a748-cd60f4e47c95
For help, see: https://nodejs.org/en/docs/inspector
ready - started server on 0.0.0.0:3000, url: http://localhost:3000

NODE_OPTIONS='--inspect' npm run dev veya NODE_OPTIONS='--inspect' yarn dev çalıştırmanın işe yaramayacağını unutmayın. Bu, aynı bağlantı noktasında birden fazla hata ayıklayıcı başlatmaya çalışacaktır: biri npm/yarn işlemi için diğeri Next.js için. Daha sonra konsolunuzda Starting inspector on 127.0.0.1:9229 failed: address already in use gibi bir hata alırsınız.

Sunucu başladığında, Chrome'da yeni bir sekme açın ve chrome://inspect adresini ziyaret edin; burada Uzak Hedef bölümünde Next.js uygulamanızı görmeniz gerekir. Ayrı bir DevTools penceresi açmak için uygulamanızın altındaki inspect 'e tıklayın, ardından Sources sekmesine gidin.

Burada sunucu tarafı kodunda hata ayıklama, Chrome DevTools ile istemci tarafı kodunda hata ayıklama gibi çalışır, ancak burada Ctrl+P veya ⌘+P ile dosya aradığınızda, kaynak dosyalarınız webpack://{application-name}/./ ile başlayan yollara sahip olacaktır (burada {application-name}, package.json dosyanıza göre uygulamanızın adıyla değiştirilecektir).

Debugging on Windows

Windows kullanıcıları NODE_OPTIONS='--inspect' adresini kullanırken bir sorunla karşılaşabilirler çünkü bu sözdizimi Windows platformlarında desteklenmemektedir. Bu sorunu aşmak için cross-env paketini geliştirme bağımlılığı olarak ekleyin (-D ile npm ve yarn) ve dev betiğini aşağıdakiyle değiştirin.

package.json
{
  "scripts": {
    "dev": "cross-env NODE_OPTIONS='--inspect' next dev"
  }
}

cross-env hangi platformda olursanız olun (Mac, Linux ve Windows dahil) NODE_OPTIONS ortam değişkenini ayarlayacak ve cihazlar ve işletim sistemleri arasında tutarlı bir şekilde hata ayıklamanıza olanak tanıyacaktır.

Bilmekte fayda var: Makinenizde Windows Defender'ın devre dışı bırakıldığından emin olun. Bu harici hizmet okunan her dosyayı kontrol eder ve bunun next dev ile Hızlı Yenileme süresini büyük ölçüde artırdığı bildirilmiştir. Bu bilinen bir sorundur, Next.js ile ilgili değildir, ancak Next.js geliştirmesini etkiler.

More information

Bir JavaScript hata ayıklayıcısının nasıl kullanılacağı hakkında daha fazla bilgi edinmek için aşağıdaki belgelere göz atın: