FiveM NUI'yi hata ayıklama: nui_devtools, konsol hataları ve başarısız geri aramalar

NUI'niz boş bir panel olarak açılır, bir düğme hiçbir şey yapmaz veya imleç görünür ve hiçbir ekran takip etmez. Genellikle Lua hatası yoktur çünkü hata web sayfasında. Tarayıcı konsoluna ihtiyacınız var ve FiveM'de bir tane vardır. Bu rehber nasıl açılacağını, hatalarını nasıl okuyacağını ve UI'nizi oyun olmadan nasıl test edeceğinizi kapsar.

#Devtools'u Açma: nui_devtools

NUI oyunun içinde bir Chromium sayfasıdır. FiveM konsolunu açmak için F8 tuşuna basın ve çalıştırın:

nui_devtools

NUI katmanı için bir devtools penceresi açılır, tarayıcıdan bildiğiniz gibi. Bu sekmeleri kullanın:

• Konsol: JavaScript hataları ve kendi console.log satırlarınız.
• Ağ: sayfanın yaptığı her istek, Lua'ya geri aramaları dahil.
• Öğeler: canlı HTML ve CSS. Öğenizin var olup olmadığını, ne kadar büyük olduğunu ve gizli olup olmadığını görmek için kullanın.
• Kaynaklar: betiğinizde kırılma noktaları ayarlayın.

Dikkat: nui_devtools'un kullanılabilir olup olmadığı ayarlarınıza ve çalıştırdığınız istemci derlemesine bağlıdır. Komut hiçbir şey yapmıyorsa, oyun istemcinizin güncel olduğunu kontrol edin ve aşağıda gösterildiği gibi UI'yi normal bir tarayıcıda test edin.

UI'niz yalnızca SendNUIMessage sonrasında görünüyorsa, önce devtools'u açın ve sonra eylemi tetikleyin, böylece gelen mesajları görürsünüz.

#Konsol Hatalarını Okuma

Konsol sekmesindeki hatalar dosyayı ve betiğinizin satırını gösterir. En sık göreceğiniz olanlar:

Uncaught TypeError: Cannot read properties of undefined (reading 'items')

Kodunuz undefined olan bir şey üzerinde .items okudu. NUI'de bu neredeyse her zaman mesajdan gelir:

window.addEventListener('message', (event) => {
  const { action, data } = event.data
  if (action === 'open') {
    render(data.items)   // data is undefined
  }
})

Lua'nın gerçekte ne gönderdiğini kontrol edin. Önce tüm mesajı yazdırın:

window.addEventListener('message', (event) => {
  console.log('NUI message', JSON.stringify(event.data))
})

Sonra Lua çağrısıyla karşılaştırın:

SendNUIMessage({ action = 'open', data = { items = items } })

Anahtarlar küçük harf dahil olmak üzere tam olarak eşleşmelidir. Lua'da nil olarak ayarlanan bir alan mesajdan eksik, bu nedenle JavaScript'te undefined'dır.

Diğer yaygın hatalar:

Ağ sekmesi JS, CSS veya görüntüler için 404 gösteriyorsa, sayfanın yüklediği tüm dosyaları bildirimde files'a ekleyin ve ui_page'i doğru HTML'ye işaret edin:

ui_page 'web/index.html'

files {
  'web/index.html',
  'web/**/*',
}

Bir Vite veya React derlemesi için, çıktı klasörünü kullanın, FiveM NUI React ve Vite ile bölümüne bakın.

#https://resource/cb'ye başarısız getiri

NUI, https://<resource name>/<callback name> isteği ile Lua'ya mesajlar gönderir:

fetch(`https://${GetParentResourceName()}/close`, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({}),
})

Ağ sekmesinde başarısız bir istek kırmızıda gösterilir:

POST https://my_script/close net::ERR_FAILED

Bunları sırasıyla kontrol edin:

1. Geri arama kayıtlı değil. Eğik çizgiden sonraki ad tam olarak istemcide bir RegisterNUICallback ile eşleşmelidir:

RegisterNUICallback('close', function(data, cb)
    SetNuiFocus(false, false)
    cb('ok')
end)

2. Kaynak adı yanlıştır. URL'deki host kaynak klasör adıdır. Klasörü yeniden adlandırdıysanız, hardcoded https://old_name/close başarısız olur. Sayfada yukarıdaki gibi GetParentResourceName() kullanın, böylece ad klasörü takip eder.
3. Geri arama hiçbir zaman cevap vermez. Her zaman cb(...)'yi çağırın, hatta cb('ok') ile. Onu çağırmadan dönen bir işleyici isteği beklemede bırakır ve sayfa sonsuza kadar bekleyebilir.
4. Lua işleyicisi cb öncesinde hata verir. Aynı anda bir betik hatası için F8 konsolunu kontrol edin. cb öncesindeki bir hata, cevabın hiçbir zaman gönderilmediği anlamına gelir.
5. Kaynak çalışmıyor. Geri aramalar, onları kaydeden istemci betiği kadar uzun yaşar.

#Odak ve İmleç

UI gösterilirse ancak tıklanamıyorsa veya fare kapandıktan sonra takılı kalırsa, sorun SetNuiFocus, sayfası değildir. NUI odak takılı imleç bölümüne bakın.

#UI'yi Normal Bir Tarayıcıda Test Etme

Oyun içinde hata ayıklama yavaştır. NUI'nin çoğu, editörünüzün canlı yeniden yüklenmesiyle bir tarayıcıda test edilebilir.

index.html'ı yerel bir sunucu aracılığıyla açın veya Vite projesi için npm run dev çalıştırın. Daha sonra oyunun normalde sağladığı iki şeyi taklit edin.

İlk olarak, sahte GetParentResourceName ve başarısız olmayan geri aramalar:

if (!window.GetParentResourceName) {
  window.GetParentResourceName = () => 'my_script'
  window.fetch = async (url, options) => {
    console.log('NUI callback', url, options && options.body)
    return { ok: true, json: async () => ({}) }
  }
}

İkincisi, Lua'nın göndereceği mesajları gönderin. Tarayıcı konsolundan veya yalnızca geliştirme düğmesinden:

window.postMessage({ action: 'open', data: { items: [{ name: 'water', count: 3 }] } }, '*')

Bu, SendNUIMessage gibi tam olarak message dinleyicinizi çağırır. Tarayıcıda tasarlayabilir, düzeni düzeltebilir ve veri işlemeyi kontrol edebilir ve oyunu odak, gerçek veri ve gerçek geri aramaların son kontrolü için saklayabilirsiniz.

İpucu: Taslakları üretim derlemesinden kaldırın veya bunları sarın, böylece yalnızca sayfa oyunun dışında açıldığında çalışsın, yukarıdaki gibi GetParentResourceName üzerindeki if ile.

#Kontrol Listesi