ionic2
Visual Studio कोड में सेटअप और डीबगिंग Ionic 2
खोज…
परिचय
विजुअल स्टूडियो एक ओपन सोर्स आईडीई है जो कोड के लिए इन्टेलिसेन्स और एडिटिंग की सुविधा प्रदान करता है। यह आईडीई कई भाषाओं को सपोर्ट करता है जैसे (आयोनिक, सी, सी #, एंगुलरज, टाइपस्क्रिप्ट, एंड्रॉइड आदि)। ये भाषाएं VSCode में इसके एक्सटेंशन को जोड़कर वहां कोड निष्पादित करने में सक्षम हैं। VSCode का उपयोग करके हम अलग-अलग भाषाओं के कोड को चलाने और डिबग करने में सक्षम हैं।
VSCode की स्थापना
सबसे पहले आपको VSCode को डाउनलोड और इंस्टॉल करना होगा। यह VSCode नवीनतम संस्करण अपनी आधिकारिक वेबसाइट में डाउनलोड के लिए उपलब्ध है। VSCode डाउनलोड करने के बाद आपको इसे इंस्टॉल और खोलना चाहिए।
Introduction of Extensions in VSCode
VSCode एक खुला संपादक है, इसलिए यह सभी भाषाओं के लिए संपादक प्रदान करता है, लेकिन एक कोड को निष्पादित करने के लिए आपको उस विशेष भाषा के एक्सटेंशन को जोड़ना होगा। अपने आयनिक कोड को चलाने और संपादित करने के लिए आपको अपने VSCode में ionic2-vscode Extension जोड़ना चाहिए। VSCode संपादक के बाईं ओर में 5 आइकन हैं जिनमें सबसे कम एक आइकन एक्सटेंशन के लिए उपयोग किया जाता है। शॉर्टकट कुंजी (ctrl + shift + X) का उपयोग करके आप प्राप्त कर सकते हैं।
Add Extension for Ionic2 in VsCode
Ctrl + Shift + X दबाकर आपने एक्सटेंशन का वह भाग दिखाया जहाँ शीर्ष तीन डॉट्स दिखाए गए हैं ... इन डॉट्स को अधिक आइकन के रूप में जाना जाता है। इसमें से एक डायलॉग खुला है और चुनने के लिए विकल्पों की संख्या दिखाता है। अपनी आवश्यकता के अनुसार विकल्प चुनें, लेकिन सभी एक्सटेंशन प्राप्त करने के लिए आपको दिखाए गए अनुशंसित एक्सटेंशन का चयन करना चाहिए। सभी ईएक्सटेंशन की सूची जिसे आप अपना एक्सटेंशन (ionic2-vscode),npm स्थापित कर सकते हैं
VSCode में अपना आयोनिक प्रोजेक्ट बनाएं और जोड़ें
VsCode आयनिक परियोजना बनाने में असमर्थ है क्योंकि यह एक कोड संपादक है। तो आप CLI या cmd द्वारा अपनी आयनिक परियोजना बना सकते हैं। कमांड के द्वारा अपना प्रोजेक्ट बनाएं
$ ionic start appName blank
खाली टेम्पलेट आयनिक एप्लिकेशन बनाने के लिए ऊपर कमांड का उपयोग करें। Ionic2 तीन प्रकार के टेम्पलेट प्रदान करता है रिक्त, टैब और साइडमेनू । इसलिए। आप अपनी आवश्यकता के अनुसार रिक्त टेम्पलेट को किसी अन्य दो टेम्पलेट द्वारा प्रतिस्थापित कर सकते हैं।
अब, आपका आयोनिक प्रोजेक्ट बनाया गया है। इसलिए, आप संपादित करने के लिए VSCode में अपनी परियोजना को जोड़ने में सक्षम हैं। अपनी परियोजना को जोड़ने के लिए नीचे दिए गए बिंदुओं का पालन करें।
- वीएसकोड में फ़ाइल मेनू पर जाएं।
- फ़ाइल मेनू के अंदर ओपन फोल्डर पर क्लिक करें।
- अपना प्रोजेक्ट फ़ोल्डर ढूंढें और खोलें।
आप शॉर्टकट कुंजी ctrl + O या ctrl + k का उपयोग करके सीधे फ़ोल्डर खोल सकते हैं
`
अपने ईओण प्रोजेक्ट को रन और डीबग करें
> क्रोम में रन और डीबग करें
टर्मिनल या cmd या CLI में कमांड के नीचे आयनिक प्रोजेक्ट का उपयोग करने के लिए
$ ionic serve
आयनिक परियोजना को डीबग करने के लिए , सबसे पहले आपको एक्सटेंशन (क्रोम के लिए डीबगर) को जोड़ना चाहिए और फिर इस तरह लॉन्च.जॉन फ़ाइल को कॉन्फ़िगर करना चाहिए।
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch in Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8100",
"sourceMaps": true,
"webRoot": "${workspaceRoot}/src"
}
]
}
> Android में रन और डीबग करें
एंड्रॉइड में रन आयनिक प्रोजेक्ट के लिए आपको टर्मिनल या सेमी या सीएलआई में कमांड के नीचे एंड्रॉइड प्लेटफॉर्म जोड़ना चाहिए:
$ ionic cordova platform add android
इस कमांड द्वारा Android का निर्माण करें
$ ionic cordova build android
Android प्लेटफ़ॉर्म के लिए कमांड चलाएँ
$ ionic cordova run android
अब, आपका एप्लिकेशन असली Android डिवाइस पर चलता है।
Android डिवाइस में डिबग के लिए आपको VSCode में कॉर्डोवा या एंड्रॉइड एक्सटेंशन को जोड़ना होगा। और लॉन्च को कॉन्फ़िगर करें। इस तरह से फ़ाइल को खोलें।
{
"version": "0.2.0",
"configurations": [
{
"name": "Run Android on device",
"type": "cordova",
"request": "launch",
"platform": "android",
"target": "device",
"port": 9222,
"sourceMaps": true,
"cwd": "${workspaceRoot}",
"ionicLiveReload": false
},
{
"name": "Run iOS on device",
"type": "cordova",
"request": "launch",
"platform": "ios",
"target": "device",
"port": 9220,
"sourceMaps": true,
"cwd": "${workspaceRoot}",
"ionicLiveReload": false
},
{
"name": "Attach to running android on device",
"type": "cordova",
"request": "attach",
"platform": "android",
"target": "device",
"port": 9222,
"sourceMaps": true,
"cwd": "${workspaceRoot}"
},
{
"name": "Attach to running iOS on device",
"type": "cordova",
"request": "attach",
"platform": "ios",
"target": "device",
"port": 9220,
"sourceMaps": true,
"cwd": "${workspaceRoot}"
},
{
"name": "Run Android on emulator",
"type": "cordova",
"request": "launch",
"platform": "android",
"target": "emulator",
"port": 9222,
"sourceMaps": true,
"cwd": "${workspaceRoot}",
"ionicLiveReload": false
},
{
"name": "Run iOS on simulator",
"type": "cordova",
"request": "launch",
"platform": "ios",
"target": "emulator",
"port": 9220,
"sourceMaps": true,
"cwd": "${workspaceRoot}",
"ionicLiveReload": false
},
{
"name": "Attach to running android on emulator",
"type": "cordova",
"request": "attach",
"platform": "android",
"target": "emulator",
"port": 9222,
"sourceMaps": true,
"cwd": "${workspaceRoot}"
},
{
"name": "Attach to running iOS on simulator",
"type": "cordova",
"request": "attach",
"platform": "ios",
"target": "emulator",
"port": 9220,
"sourceMaps": true,
"cwd": "${workspaceRoot}"
},
{
"name": "Serve to the browser (ionic serve)",
"type": "cordova",
"request": "launch",
"platform": "serve",
"cwd": "${workspaceRoot}",
"devServerAddress": "localhost",
"sourceMaps": true,
"ionicLiveReload": true
},
{
"name": "Simulate Android in browser",
"type": "cordova",
"request": "launch",
"platform": "android",
"target": "chrome",
"simulatePort": 8000,
"livereload": true,
"sourceMaps": true,
"cwd": "${workspaceRoot}"
},
{
"name": "Simulate iOS in browser",
"type": "cordova",
"request": "launch",
"platform": "ios",
"target": "chrome",
"simulatePort": 8000,
"livereload": true,
"sourceMaps": true,
"cwd": "${workspaceRoot}"
}
]
}
कॉन्फ़िगरेशन के बाद आप डीबगिंग के लिए निम्न चरणों या छोटी कुंजियों का पालन करते हैं:
डिबग मेनू पर जाएं।
डीबग करना प्रारंभ करें क्लिक करें।
या
Short keys
डिबगिंग - F5
स्टेपओवर - F10
स्टेप इन्टू एंड स्टेप आउट - F11
डीबग करना बंद करें - Shift + F5
डिबगिंग -ctrl + shift_F5 को पुनरारंभ करें