જ્યારે તમે JavaScript માં ડેવેલોપીંગ કરી રહ્યા હોવ ત્યારે, વિવિધ જગ્યાઓ પર તમારા કોડને ડિબગ કરવું ઉપયોગી થઈ શકે છે જેથી તમે સમજી શકો કે શું થઈ રહ્યું છે.
ચાલો તમારા JavaScript કોડની સ્થિતિ તપાસવાની કેટલીક રીતો જોઈએ.
સર્વર-સાઇડ vs ક્લાયંટ સાઇડ
PHP અને JavaScript ને ડિબગ કરવા વચ્ચેનો એક મુખ્ય તફાવત એ છે કે PHP એ સર્વર-સાઇડ ભાષા છે, તેથી તમે સર્વર પરની ફાઇલમાં સંદેશાઓ લોગ કરી શકો છો.
બીજી બાજુ, JavaScript એ ક્લાયંટ-સાઇડ ભાષા છે, તેથી તમે તે જ રીતે સંદેશાઓને ફાઇલમાં સરળતાથી લોગ કરી શકતા નથી.
સૌભાગ્યવશ, તમે બ્રાઉઝરના ડેવલપર ટૂલ્સ, ખાસ કરીને Console ટૅબનો ઉપયોગ કરીને તમારા JavaScript કોડની સ્થિતિનું પરિક્ષણ કરી શકો છો.
બ્રાઉઝરનું ડેવલપર ટૂલ્સ ખોલવું
મોટાભાગના આધુનિક બ્રાઉઝર્સ બિલ્ટ-ઇન ડેવલપર ટૂલ્સ સાથે આવે છે જે તમને વેબ પેજના તત્વોનું નિરીક્ષણ અને ડિબગ કરવાની મંજૂરી આપે છે.
તમે જે બ્રાઉઝરનો ઉપયોગ કરી રહ્યા છો અને જે ઓપરેટિંગ સિસ્ટમ પર છો તેના આધારે, તમે સામાન્ય રીતે F12, Ctrl+Shift+I અથવા Cmd+Option+I જેવી કીઓ દબાવીને ડેવલપર ટૂલ્સ ખોલી શકો છો.
જો તમે તમારા બ્રાઉઝરમાં ડેવલપર ટૂલ્સ કેવી રીતે ખોલવું તે વિશે ખબર ના હો, તો તમે MDN Web Docs વેબસાઇટ પર Guides > Common questions > Tools and setup > What are browser developer tools? વિભાગમાં ઉપયોગી સૂચનાઓ મેળવી શકો છો.
[નોંધ: વપરાશકર્તાને આ નેવિગેશન દ્વારા પૃષ્ઠ જ્યાં અસ્તિત્વમાં છે ત્યાં લઈ જાઓ]
જ્યારે તમે ડેવલપર ટૂલ્સ ખોલી લો, પછી Console ટૅબ પર સ્વિચ કરો, જ્યાં પેજ પરની કોઈપણ ભૂલો લૉગ થાય છે.
આજ જગ્યા પર તમે તમારા JavaScript કોડમાંથી સંદેશાઓ લૉગ કરી શકો છો, જે તમને તેને ડિબગ કરવામાં મદદ કરશે.
console ઑબ્જેક્ટ
console ઑબ્જેક્ટ તમને બ્રાઉઝરના કોન્સોલમાં સંદેશાઓ લૉગ કરવાની મંજૂરી આપે છે. તેમાં અનેક પદ્ધતિઓ છે જેનો ઉપયોગ તમે વિવિધ પ્રકારના સંદેશાઓ લૉગ કરવા માટે કરી શકો છો.
કેટલીક સૌથી વધુ ઉપયોગમાં લેવાતી પદ્ધતિઓ:
console.log() પદ્ધતિ સૌથી લોકપ્રિય છે, કારણ કે તે કોન્સોલમાં લગભગ કંઈપણ લૉગ કરવા માટે ઉપયોગી છે. તમે તેમાં strings, numbers, arrays, અથવા objects જેવી વિવિધ ડેટા પ્રકારો પાસ કરી શકો છો.
કોન્સોલમાં એક સરળ string વેરીએબલ લૉગ કરવાનું ઉદાહરણ જુઓ.
(function() {
let hello = 'Hello, World!';
console.log(hello)
})();
જો તમે Developer Tools ખોલી અને Console ટૅબ પસંદ કરો છો, તો વેરીએબલનો કન્ટેન્ટ Console માં લૉગ થશે.
કન્સોલ આઉટપુટમાં સોર્સ ફાઇલમાં કોડની જગ્યાની લિંક પણ શામેલ હોય છે, જે સંદેશા ક્યાંથી લૉગ થયો છે તે શોધવામાં મદદરૂપ થઈ શકે છે.
તમે વધુ જટિલ ડેટા પ્રકારો, જેમ કે arrays અથવા objects, ને પણ લૉગ કરી શકો છો.
(function() {
let fruits = [ 'apple', 'banana', 'orange' ];
console.log( fruits );
let person = {
firstName: "Jane",
lastName: "Smith",
age: 30,
eyeColor: "brown"
}
console.log( person );
})();
જ્યારે તમે આને કન્સોલમાં જુઓ છો, ત્યારે array અને object લૉગ થયેલા દેખાશે. additionally, તમે array અથવા object ને વિસ્તૃત કરી તેની properties અને તે data type માટે ઉપલબ્ધ JavaScript methods જોઈ શકો છો.
તમે કન્સોલમાં સંદેશાઓ લૉગ કરવા માટે ઘણી બીજી પદ્ધતિઓનો પણ ઉપયોગ કરી શકો છો, જેમ કે console.error(), console.warn(), અને console.info().
સૌથી ઓછો ઉપયોગ થતી પદ્ધતિઓમાંથી એક console.table() છે, જે array અથવા object ને table સ્વરૂપે લૉગ કરે છે, જેથી તેને વાંચવું સરળ બને છે.
(function() {
let people = [
{ name: 'Jane', age: 30 },
{ name: 'John', age: 40 },
{ name: 'Alice', age: 25 }
];
console.table( people );
})();
આ ખાસ કરીને ત્યારે ઉપયોગી છે જ્યારે તમારી પાસે ઑબ્જેક્ટ્સનો array હોય અને તમે ડેટાને વધુ વાંચી શકાય તેવા ફોર્મેટમાં જોવા માંગતા હોવ.
વધુ વાંચન
બ્રાઉઝરના કન્સોલ ઑબ્જેક્ટ અને તેની પદ્ધતિઓ વિશે વધુ વાંચવા માટે, MDN વેબ ડૉક્સ પેજની મુલાકાત લેવાનું ભૂલશો નહીં. તેમાં બધી કન્સોલ પદ્ધતિઓની સંપૂર્ણ સૂચિ તેમજ ઉપયોગી ઉદાહરણો શામેલ છે.