ਓਹ, ਮੈਂ ਇਸਨੂੰ ਦੁਬਾਰਾ ਕੀਤਾ: JavaScript ਵਿੱਚ ਆਮ ਗਲਤੀਆਂ ਨੂੰ ਡੀਬੱਗ ਕਰਨਾ

JavaScript ਕੋਡ ਲਿਖਣਾ ਚੁਣੌਤੀਪੂਰਨ ਹੋ ਸਕਦਾ ਹੈ ਅਤੇ ਕਈ ਵਾਰ ਡਰਾਉਣਾ ਵੀ ਹੋ ਸਕਦਾ ਹੈ, ਕਿਉਂਕਿ ਬਹੁਤ ਸਾਰੇ ਡਿਵੈਲਪਰ ਇਸ ਤੋਂ ਜਾਣੂ ਹਨ। ਕੰਮ ਦੀ ਪ੍ਰਕਿਰਿਆ ਵਿੱਚ, ਗਲਤੀਆਂ ਲਾਜ਼ਮੀ ਤੌਰ 'ਤੇ ਪੈਦਾ ਹੁੰਦੀਆਂ ਹਨ, ਅਤੇ ਉਹਨਾਂ ਵਿੱਚੋਂ ਕੁਝ ਨੂੰ ਅਕਸਰ ਦੁਹਰਾਇਆ ਜਾਂਦਾ ਹੈ. ਇਹ ਲੇਖ, ਨਵੇਂ ਡਿਵੈਲਪਰਾਂ ਦੇ ਉਦੇਸ਼ ਨਾਲ, ਇਹਨਾਂ ਗਲਤੀਆਂ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਕਿਵੇਂ ਹੱਲ ਕਰਨਾ ਹੈ ਬਾਰੇ ਗੱਲ ਕਰਦਾ ਹੈ. ਸਪਸ਼ਟਤਾ ਲਈ, ਫੰਕਸ਼ਨਾਂ, ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਵਸਤੂਆਂ ਦੇ ਨਾਮ ਲਏ ਗਏ ਹਨ ਪ੍ਰਸਿੱਧ ਗੀਤ. ਇਹ ਸਭ ਤੁਹਾਨੂੰ ਜਲਦੀ ਯਾਦ ਰੱਖਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ ਕਿ ਆਮ ਗਲਤੀਆਂ ਨੂੰ ਕਿਵੇਂ ਠੀਕ ਕਰਨਾ ਹੈ।

ਅਸੀਂ ਯਾਦ ਦਿਵਾਉਂਦੇ ਹਾਂ: "Habr" ਦੇ ਸਾਰੇ ਪਾਠਕਾਂ ਲਈ - "Habr" ਪ੍ਰਚਾਰ ਕੋਡ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਕਿਸੇ ਵੀ ਸਕਿੱਲਬਾਕਸ ਕੋਰਸ ਵਿੱਚ ਦਾਖਲਾ ਲੈਣ ਵੇਲੇ 10 ਰੂਬਲ ਦੀ ਛੋਟ।

ਸਕਿੱਲਬਾਕਸ ਸਿਫ਼ਾਰਿਸ਼ ਕਰਦਾ ਹੈ: ਪ੍ਰੈਕਟੀਕਲ ਕੋਰਸ "ਮੋਬਾਈਲ ਡਿਵੈਲਪਰ ਪ੍ਰੋ".

TypeError: ਸੰਪੱਤੀ ਪਰਿਭਾਸ਼ਿਤ ਨਹੀਂ ਹੈ

let girl = {
    name: "Lucky",
    location: "Hollywood",
    profession: "star",
    thingsMissingInHerLife: true,
    lovely: true,
    cry: function() {
        return "cry, cry, cries in her lonely heart"
    }
}
console.log(girl.named.lucky)

ਉਪਰੋਕਤ ਉਦਾਹਰਨ ਕੋਡ ਗਲਤੀ ਨੂੰ ਸੁੱਟਦਾ ਹੈ Uncaught TypeError: ਪਰਿਭਾਸ਼ਿਤ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ 'ਲੱਕੀ' ਨੂੰ ਨਹੀਂ ਪੜ੍ਹਿਆ ਜਾ ਸਕਦਾ ਹੈ। ਸਮੱਸਿਆ ਇਹ ਹੈ ਕਿ ਕੁੜੀ ਦੀ ਵਸਤੂ ਕੋਲ ਨਾਮ ਦੀ ਜਾਇਦਾਦ ਨਹੀਂ ਹੈ, ਹਾਲਾਂਕਿ ਇਸ ਕੋਲ ਨਾਮ ਦੀ ਜਾਇਦਾਦ ਹੈ। ਅਤੇ ਕਿਉਂਕਿ girl.named ਜਾਇਦਾਦ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਨਹੀਂ ਕੀਤਾ ਗਿਆ ਹੈ, ਤੁਸੀਂ ਇਸ ਤੱਕ ਪਹੁੰਚ ਨਹੀਂ ਕਰ ਸਕਦੇ, ਕਿਉਂਕਿ ਰਸਮੀ ਤੌਰ 'ਤੇ ਇਹ ਮੌਜੂਦ ਨਹੀਂ ਹੈ। ਪਰ ਜੇਕਰ ਤੁਸੀਂ girl.named.lucky ਨੂੰ girl.name ਨਾਲ ਬਦਲਦੇ ਹੋ, ਤਾਂ ਸਭ ਕੁਝ ਕੰਮ ਕਰੇਗਾ ਅਤੇ ਪ੍ਰੋਗਰਾਮ ਲੱਕੀ ਨੂੰ ਵਾਪਸ ਕਰ ਦੇਵੇਗਾ।

ਤੁਸੀਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਬਾਰੇ ਹੋਰ ਜਾਣ ਸਕਦੇ ਹੋ ਇੱਥੇ ਪੜ੍ਹੋ.

TypeErrors ਨੂੰ ਕਿਵੇਂ ਹੱਲ ਕਰਨਾ ਹੈ

TypeErrors ਉਦੋਂ ਵਾਪਰਦੀਆਂ ਹਨ ਜਦੋਂ ਇੱਕ ਪ੍ਰੋਗਰਾਮਰ ਉਹਨਾਂ ਡੇਟਾ ਤੇ ਕਾਰਵਾਈਆਂ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦਾ ਹੈ ਜੋ ਕਿਸੇ ਖਾਸ ਕਿਸਮ ਨਾਲ ਮੇਲ ਨਹੀਂ ਖਾਂਦਾ। ਉਦਾਹਰਨਾਂ ਵਿੱਚ .bold(), ਇੱਕ ਪਰਿਭਾਸ਼ਿਤ ਸੰਪੱਤੀ ਲਈ ਪੁੱਛਣਾ, ਜਾਂ ਇੱਕ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰਨਾ ਸ਼ਾਮਲ ਹੈ ਜੋ ਅਸਲ ਵਿੱਚ ਇੱਕ ਫੰਕਸ਼ਨ ਨਹੀਂ ਹੈ।

ਇਸ ਲਈ, ਜੇਕਰ ਤੁਸੀਂ girl() ਨੂੰ ਕਾਲ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਗਲਤੀ ਪ੍ਰਾਪਤ ਹੋਵੇਗੀ Uncaught TypeError: yourVariable.bold ਇੱਕ ਫੰਕਸ਼ਨ ਨਹੀਂ ਹੈ ਅਤੇ ਗਰਲ ਇੱਕ ਫੰਕਸ਼ਨ ਨਹੀਂ ਹੈ, ਕਿਉਂਕਿ ਇਹ ਅਸਲ ਵਿੱਚ ਇੱਕ ਆਬਜੈਕਟ ਹੈ ਜਿਸਨੂੰ ਬੁਲਾਇਆ ਜਾ ਰਿਹਾ ਹੈ, ਇੱਕ ਫੰਕਸ਼ਨ ਨਹੀਂ।

ਗਲਤੀਆਂ ਨੂੰ ਦੂਰ ਕਰਨ ਲਈ, ਤੁਹਾਨੂੰ ਵੇਰੀਏਬਲਾਂ ਦਾ ਅਧਿਐਨ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। ਇਸ ਲਈ, ਇੱਕ ਕੁੜੀ ਕੀ ਹੈ? ਕੁੜੀ ਦਾ ਨਾਮ ਕੀ ਹੈ? ਤੁਸੀਂ ਕੋਡ ਦਾ ਵਿਸ਼ਲੇਸ਼ਣ ਕਰਕੇ, console.log, ਡੀਬਗਰ ਕਮਾਂਡ, ਜਾਂ ਕੰਸੋਲ ਵਿੱਚ ਵੇਰੀਏਬਲ ਨਾਮ ਨੂੰ ਕਾਲ ਕਰਕੇ ਵੇਰੀਏਬਲ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਕੇ ਪਤਾ ਲਗਾ ਸਕਦੇ ਹੋ। ਤੁਹਾਨੂੰ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਦੀ ਲੋੜ ਹੈ ਕਿ ਵੇਰੀਏਬਲ ਵਿੱਚ ਮੌਜੂਦ ਡਾਟਾ ਕਿਸਮ 'ਤੇ ਕੰਮ ਕਰਨਾ ਸੰਭਵ ਹੈ। ਜੇਕਰ ਇਹ ਫਿੱਟ ਨਹੀਂ ਬੈਠਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਬਦਲੋ, ਉਦਾਹਰਨ ਲਈ, ਇੱਕ ਸ਼ਰਤ ਜੋੜੋ ਜਾਂ ਕੋਸ਼ਿਸ਼ ਕਰੋ..ਕੈਚ ਬਲਾਕ - ਅਤੇ ਕਾਰਵਾਈ ਨੂੰ ਚਲਾਉਣ 'ਤੇ ਨਿਯੰਤਰਣ ਪਾਓ।

ਸਟੈਕ ਓਵਰਫਲੋ

ਜੇ ਤੁਸੀਂ ਬੇਬੀ ਵਨ ਮੋਰ ਟਾਈਮ (ਇਹ ਬ੍ਰਿਟਨੀ ਸਪੀਅਰਸ, ਹਾਂ) ਗੀਤ ਦੇ ਬੋਲਾਂ ਦੇ ਲੇਖਕਾਂ 'ਤੇ ਵਿਸ਼ਵਾਸ ਕਰਦੇ ਹੋ, ਤਾਂ ਇਸ ਸੰਦਰਭ ਵਿੱਚ ਹਿੱਟ ਸ਼ਬਦ ਦਾ ਅਰਥ ਹੈ ਗਾਇਕ ਦੀ ਦੁਬਾਰਾ ਬੁਲਾਏ ਜਾਣ ਦੀ ਇੱਛਾ (ਇੱਥੇ ਇਸ ਦੇ ਬਹੁਤ ਹੀ ਸੰਦਰਭ ਦੀ ਵਿਆਖਿਆ ਹੈ। ਗੀਤ - ਅਨੁਵਾਦਕ ਦਾ ਨੋਟ). ਇਹ ਚੰਗੀ ਤਰ੍ਹਾਂ ਹੋ ਸਕਦਾ ਹੈ ਕਿ ਇਹ ਇੱਛਾ ਅਸਲ ਜੀਵਨ ਵਿੱਚ ਕਾਲਾਂ ਦੀ ਗਿਣਤੀ ਵਿੱਚ ਵਾਧਾ ਕਰਨ ਦੀ ਅਗਵਾਈ ਕਰੇਗੀ. ਪਰ ਪ੍ਰੋਗਰਾਮਿੰਗ ਵਿੱਚ, ਇਹ ਇੱਕ ਦੁਹਰਾਓ ਹੈ ਜੋ ਇੱਕ ਗਲਤੀ ਦਾ ਕਾਰਨ ਬਣ ਸਕਦਾ ਹੈ ਜੇਕਰ ਕਾਲ ਸਟੈਕ ਓਵਰਫਲੋ ਹੋ ਜਾਂਦਾ ਹੈ।

ਗਲਤੀਆਂ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦੀਆਂ ਹਨ:

ਤਰੁੱਟੀ: ਸਟੈਕ ਸਪੇਸ ਤੋਂ ਬਾਹਰ (ਐਜ)
ਅੰਦਰੂਨੀ ਗਲਤੀ: ਬਹੁਤ ਜ਼ਿਆਦਾ ਦੁਹਰਾਓ (ਫਾਇਰਫਾਕਸ)
RangeError: ਕਾਲ ਸਟੈਕ ਦਾ ਅਧਿਕਤਮ ਆਕਾਰ ਵੱਧ ਗਿਆ (Chrome)

ਇੱਕ ਸਟੈਕ ਓਵਰਫਲੋ ਹੁੰਦਾ ਹੈ ਜੇਕਰ ਡਿਵੈਲਪਰ ਰੀਕਰਸ਼ਨ ਵਿੱਚ ਬੇਸ ਕੇਸ ਨੂੰ ਨਹੀਂ ਸਮਝਦਾ, ਜਾਂ ਜੇਕਰ ਕੋਡ ਇਰਾਦੇ ਵਾਲੇ ਕੇਸ ਨੂੰ ਸੰਬੋਧਿਤ ਨਹੀਂ ਕਰਦਾ ਹੈ।

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness++
    return oneMoreTime(stillBelieve, loneliness)
}

ਇਸ ਸਥਿਤੀ ਵਿੱਚ, stillBelieve ਕਦੇ ਵੀ ਗਲਤ ਨਹੀਂ ਹੋ ਸਕਦਾ, ਇਸਲਈ ਹਰ ਵਾਰ OneMoreTime ਨੂੰ ਬੁਲਾਇਆ ਜਾਵੇਗਾ, ਪਰ ਫੰਕਸ਼ਨ ਕਦੇ ਪੂਰਾ ਨਹੀਂ ਹੋਵੇਗਾ।

ਜੇ ਤੁਸੀਂ ਦੋ ਦੋਸਤਾਂ 'ਤੇ ਭਰੋਸਾ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰ ਦਿੰਦੇ ਹੋ, ਤਾਂ ਇਹ ਇਕੱਲਤਾ ਨੂੰ ਘਟਾ ਦੇਵੇਗਾ, ਅਤੇ ਤੁਹਾਨੂੰ ਕਾਲ ਦੀ ਉਡੀਕ ਨਹੀਂ ਕਰਨੀ ਪਵੇਗੀ।

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness--
    stillBelieve = false
    return oneMoreTime(stillBelieve, loneliness)
}

ਇੱਕ ਉਦਾਹਰਨ ਅਨੰਤ ਲੂਪਸ ਵਾਲੇ ਕੇਸ ਹਨ, ਜਦੋਂ ਸਿਸਟਮ ਇੱਕ ਗਲਤੀ ਸੁਨੇਹਾ ਨਹੀਂ ਬਣਾਉਂਦਾ ਹੈ, ਪਰ ਉਹ ਪੰਨਾ ਜਿਸ 'ਤੇ JavaScript ਕੋਡ ਨੂੰ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਬਸ ਫ੍ਰੀਜ਼ ਹੋ ਜਾਂਦਾ ਹੈ। ਇਹ ਉਦੋਂ ਵਾਪਰਦਾ ਹੈ ਜੇਕਰ while ਲੂਪ ਵਿੱਚ ਸਮਾਪਤੀ ਸਥਿਤੀ ਨਹੀਂ ਹੁੰਦੀ ਹੈ।

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
}

ਤੁਸੀਂ ਹੇਠ ਲਿਖੇ ਤਰੀਕੇ ਨਾਲ ਸਮੱਸਿਆ ਨੂੰ ਹੱਲ ਕਰ ਸਕਦੇ ਹੋ:

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
  worldEnded = true
}

ਅਨੰਤ ਲੂਪਸ ਅਤੇ ਰੀਕਰਸ਼ਨਾਂ ਨੂੰ ਡੀਬੱਗ ਕਰਨਾ

ਜੇਕਰ ਤੁਹਾਨੂੰ ਇੱਕ ਅਨੰਤ ਲੂਪ ਸਮੱਸਿਆ ਹੈ, ਤਾਂ ਤੁਹਾਨੂੰ ਕ੍ਰੋਮ ਜਾਂ ਐਜ ਵਿੱਚ ਟੈਬ ਨੂੰ ਬੰਦ ਕਰਨ ਦੀ ਲੋੜ ਹੈ, ਅਤੇ ਫਾਇਰਫਾਕਸ ਵਿੱਚ ਬ੍ਰਾਊਜ਼ਰ ਵਿੰਡੋ ਨੂੰ ਬੰਦ ਕਰਨਾ ਹੋਵੇਗਾ। ਇਸ ਤੋਂ ਬਾਅਦ, ਤੁਹਾਨੂੰ ਕੋਡ ਦਾ ਧਿਆਨ ਨਾਲ ਵਿਸ਼ਲੇਸ਼ਣ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਸਮੱਸਿਆ ਦਾ ਪਤਾ ਨਹੀਂ ਲਗਾ ਸਕਦੇ ਹੋ, ਤਾਂ ਇਹ ਤੁਹਾਡੇ ਲੂਪ ਜਾਂ ਫੰਕਸ਼ਨ ਵਿੱਚ ਇੱਕ ਡੀਬਗਰ ਕਮਾਂਡ ਨੂੰ ਜੋੜਨਾ ਅਤੇ ਵੇਰੀਏਬਲ ਦੇ ਮੁੱਲਾਂ ਦੀ ਜਾਂਚ ਕਰਨ ਦੇ ਯੋਗ ਹੈ। ਜੇ ਨਤੀਜਾ ਉਮੀਦ ਦੇ ਅਨੁਸਾਰ ਨਹੀਂ ਹੈ, ਤਾਂ ਅਸੀਂ ਇਸਨੂੰ ਬਦਲਦੇ ਹਾਂ, ਇਹ ਆਸਾਨੀ ਨਾਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ.

ਉਪਰੋਕਤ ਉਦਾਹਰਨ ਵਿੱਚ, ਡੀਬੱਗਰ ਨੂੰ ਫੰਕਸ਼ਨ ਜਾਂ ਲੂਪ ਦੀ ਪਹਿਲੀ ਲਾਈਨ ਵਜੋਂ ਜੋੜਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਫਿਰ ਤੁਹਾਨੂੰ ਸਕੋਪ ਵਿੱਚ ਵੇਰੀਏਬਲਾਂ ਦਾ ਵਿਸ਼ਲੇਸ਼ਣ ਕਰਦੇ ਹੋਏ, Chrome ਵਿੱਚ ਡੀਬੱਗ ਟੈਬ ਨੂੰ ਖੋਲ੍ਹਣ ਦੀ ਲੋੜ ਹੈ। ਅਗਲੇ ਬਟਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਤੁਸੀਂ ਹਰੇਕ ਦੁਹਰਾਅ ਨਾਲ ਉਹਨਾਂ ਦੀਆਂ ਤਬਦੀਲੀਆਂ ਨੂੰ ਟਰੈਕ ਕਰ ਸਕਦੇ ਹੋ। ਇਹ ਸਭ ਕਰਨਾ ਆਸਾਨ ਹੈ, ਅਤੇ ਜ਼ਿਆਦਾਤਰ ਮਾਮਲਿਆਂ ਵਿੱਚ ਸਮੱਸਿਆ ਪਾਈ ਜਾਂਦੀ ਹੈ.

ਤੁਸੀਂ ਇੱਥੇ ਇਸ ਸਭ ਬਾਰੇ ਹੋਰ ਪੜ੍ਹ ਸਕਦੇ ਹੋ (ਕਰੋਮ ਲਈ) ਅਤੇ ਇੱਥੇ (ਫਾਇਰਫਾਕਸ ਲਈ).

ਸਿੰਟੈਕਸ ਗਲਤੀ

JavaScript ਵਿੱਚ ਸਭ ਤੋਂ ਆਮ ਗਲਤੀਆਂ ਵਿੱਚੋਂ ਇੱਕ ਸਿੰਟੈਕਸ ਐਰਰ ਹੈ। ਟੈਕਸਟ ਐਡੀਟਰ ਐਕਸਟੈਂਸ਼ਨ ਉਹਨਾਂ ਤੋਂ ਬਚਣ ਵਿੱਚ ਤੁਹਾਡੀ ਮਦਦ ਕਰਨਗੇ। ਉਦਾਹਰਨ ਲਈ, ਬ੍ਰੈਕੇਟ ਪੇਅਰ ਕਲਰਾਈਜ਼ਰ ਕੋਡ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਰੰਗਾਂ ਨਾਲ ਬਰੈਕਟਾਂ ਨੂੰ ਚਿੰਨ੍ਹਿਤ ਕਰਦਾ ਹੈ, ਅਤੇ ਪ੍ਰੀਟੀਅਰ ਜਾਂ ਇੱਕ ਸਮਾਨ ਵਿਸ਼ਲੇਸ਼ਣ ਟੂਲ ਤਰੁੱਟੀਆਂ ਨੂੰ ਜਲਦੀ ਲੱਭਣਾ ਸੰਭਵ ਬਣਾਉਂਦਾ ਹੈ। ਸਿੰਟੈਕਸ ਐਰਰ ਦੀ ਸੰਭਾਵਨਾ ਨੂੰ ਘਟਾਉਣ ਦਾ ਸਭ ਤੋਂ ਵਧੀਆ ਵਿਕਲਪ ਘੱਟੋ-ਘੱਟ ਆਲ੍ਹਣਾ ਹੈ।

ਟਿੱਪਣੀਆਂ ਵਿੱਚ ਸਾਂਝਾ ਕਰੋ: ਤੁਸੀਂ ਗਲਤੀਆਂ ਨੂੰ ਰੋਕਣ ਜਾਂ ਉਹਨਾਂ ਨੂੰ ਜਲਦੀ ਖੋਜਣ ਅਤੇ ਖਤਮ ਕਰਨ ਲਈ ਕੀ ਕਰਦੇ ਹੋ?

ਸਕਿੱਲਬਾਕਸ ਸਿਫ਼ਾਰਿਸ਼ ਕਰਦਾ ਹੈ:

• ਦੋ ਸਾਲਾ ਪ੍ਰੈਕਟੀਕਲ ਕੋਰਸ "ਮੈਂ ਇੱਕ ਪ੍ਰੋ ਵੈੱਬ ਡਿਵੈਲਪਰ ਹਾਂ".
• Onlineਨਲਾਈਨ ਕੋਰਸ "0 ਤੋਂ C# ਡਿਵੈਲਪਰ".
• ਪ੍ਰੈਕਟੀਕਲ ਸਾਲ ਦਾ ਕੋਰਸ "0 ਤੋਂ PRO ਤੱਕ PHP ਡਿਵੈਲਪਰ".

ਸਰੋਤ: www.habr.com