a

ABLY مقالات و مطالب مجموعه

كد ديباگر ويژوال استوديو براي استفاده در گوگل كروم

كد ديباگر ويژوال استوديو براي استفاده در گوگل كروم

كد ديباگر ويژوال استوديو برای استفاده در گوگل كروم

با استفاده از VS.Code كد جاوااسكريپت خود را كه در گوگل كروم اجرا می شود، خطايابی كنيد.
VS.Code يك افزونه است برای خطايابی كد های جاوااسكريپت در مرورگر گوگل كروم يا مرورگرهای ديگری كه پروتكل خطايابی گوگل كروم را پشتيبانی می كنند.
 
 VS.Codeچیست
 
 

كد ديباگر ويژوال استوديو برای استفاده در گوگل كروم

با استفاده از VS.Code كد جاوااسكريپت خود را كه در گوگل كروم اجرا مي شود، خطايابي كنيد.
VS.Code يك افزونه است برای خطايابی كد های جاوااسكريپت در مرورگر گوگل كروم يا مرورگرهای ديگری كه پروتكل خطايابی گوگل كروم را پشتيبانی مي كنند.
 
كد ديباگر ويژوال استوديو
 

ويژگي ها VS.Code: 

- ايجاد breakpoint ها كه در سورس فايل ها قرار دارند زماني سورس map فعال است.
- مرور خط به خط كدها(stepping) از طريق دكمه هايي كه در صفحه كروم قرار دارند.
 

شروع كار VS.Code: 

 
براي استفاده از اين افزونه ، شما بايد ابتدا پوشه حاوي پروژه اي كه مي خواهيد روي آن كار كنيد را باز كنيد.
 

استفاده از خطاياب-debugger :

شما زماني ميتوانيد پروژه خود را خطايابي كنيد كه تنظيمات زمان راه اندازي (launch config) انجام شده باشد . 
يك تنظيم اجرا (launch config) از منوي drop down در قسمت debug  انتخاب كنيد و سپس دكمه play يا f5 را براي شروع               فشار دهيد.
 

تنظيمات خطاياب-debugger : 

اين افزونه به دو صورت كار ميكند، - يا مي تواند يك نسخه از گوگل كروم را همزمان و در جهت پيمايش برنامه شما اجرا كند ، يا ميتواند به يك نسخه در حال اجراي كروم متصل شود درست مانند زماني كه از node debugger استفاده مي كنيد . 
يكي از اين مدل ها را از طريق يك فايل .vscode/launch.jason واقع در ريشه مسير پروژه خود تنظيم مي كنيد.
مي توانيد به صورت دستي اين فايل را ايجاد كنيد يا اينكه زمانيكه برنامه خود را اجرا مي كنيد و اين فايل از قبل وجود نداشته باشد، VS.Code يك نمونه براي شما ميسازد.

 

اجرا خطاياب-debugger: 

دو نمونه براي تنظيم launch.jason از طريق حالتهاي requestو  launch
شما بايد يك فايل يا url براي اجراي كروم در مقابل يك فايل يا url محلي مشخص كنيد. اگر از url  استفاده مي كنيد، ريشه مسير وب (webroot) را به مسيري كه فايلها از آن خوانده ميشوند ست كنيد.
اين ميتواند يك مسير مطلق باشد يا مسيري كه از ${WebspaceRoot} استفاده ميكند . (پوشه اي كه در افزونه VS.Code باز است(.
Webroot براي تبديل كردن url ها (مانند http://localhost/app.js) به يك فايل روي ديسك(مانند "/users/me/project/app.js) استفاده مي شود . پس مراقب باشيد كه webroot به درستي تنظيم شده باشد.
 
Block of code****
 
اگر ميخواهيد از يك نسخه ديگر كروم استفاده كنيد،ميتوانيد فيلد "runtime executable" را توسط يك مسير به برنامه كروم ست كنيد.

 

اتصال (attach) خطاياب-debugger: 

براي استفاده از حالت هاي request  و  attach شما بايد كروم را در حالتي كه خطايابي راه دور (Remote Debugging) آن فعال است ، اجرا كنيد. 
 
براي انجام اين كار در ويندوز مراحل زير را انجام دهيد. 
- بر روي ميانبر كروم كليك راست كرده و properties  را انتخاب كنيد.
- در قسمت "target" ، "—remote-debugging-port=9222" را اضافه كنيد.
- يا در يك command prompt دستور زير را اجرا كنيد : 
<path to chrome>/chrome.exe –remote-debugging-port=9222
 
كروم را اجرا كرده و به صفحه خود برويد.
 
استفاده از افزونه در مواردي غير از گوگل كروم : 
به لحاظ تئوري شما همچنين ميتوانيد اين افزونه را به موارد ديگري مانند Electron و Cordova كه پروتكل خطايابي كروم را پشتيباني ميكنند، متصل كنيد. اين موارد به طور رسمي از اين افزونه پشتيباني نمي كنند اما اساساً با مراحل مشابه بايد كار كنند.
شما براي استفاده از Launch Config ميتوانيد از طريق ست كردن يك RuntimeExecutable در يك اسكريپت يا برنامه براي اجرا استفاده كنيد . يا ميتوانيد از يك تنظيم اتصال (attach config) براي متصل كردن اين افزونه به يك پردازش در حال اجرا استفاده كنيد.
اگر افزونه ي Code نتواند برنامه هدف را پيدا كند، هميشه ميتوانيد با اجراي مسير http://localhost:<port>/json در مرورگر، از دردسترس بودن آن مطمئن شويد. اگر پاسخي شامل يك دسته كد json  دريافت كرديد ، و صفحه برنامه مورد نظر خود را در آن فايل json توانستيد پيدا كنيد، پس افزونه بايد براي اين برنامه دردسترس بوده و قابل استفاده باشد.
 

فيلد هاي launch config :

 
DiagnosticLogging : زماني كه true باشد، تطبق دهنده (adapter) ، اطلاعات خطايابي خودش را در كنسول و در اين فايل ثبت مي كند. اين اطلاعات زماني به درد ميخورد كه موضوعي را جهت پيگيري در github مطرح ميكنيد.
RuntimeExecutable : مسير مطلق يا نسبي فضاي كاري به سمت فايل اجرايي كه زمان اجرا مورد استفاده قرار ميگيرد. اگر مشخص شود، كروم از طريق مسير نصب پيش فرض مورد استفاده قرار خواهد گرفت . 
RuntimeArgs : آرگومان هاي اختياري كه به فايل اجرايي زمان اجرا پاس داده ميشود.
UserDataDir : ميتواند به يك مسير موقت تنظيم شود . سپس كروم آن مسير را به عنوان user profile استفاده ميكند . وقتي كه شما شروع به ديباگ از طريق launch config ميكنيد و كروم در حال اجراست نمونه جديد در حالت remote Debugging شروع نخواهد شد. اگر نميخواهيد كه برنامه اصلي را ببنديد، ميتوانيد اين property را ست كنيد و نمونه برنامه جديد به طور صحيح در حالت remote debugging قرار خواهد گرفت . 
URL : براي تنظيم در حالت 'Launch' مورد نياز است . براي حالت 'attach' خطاياب به دنبال يك زبانه كه شامل آن url است ميگردد. 
 url‌ميتواند شامل كلمات باشد . براي مثال localhost:*/app  با http://localhost"123/app يا http://localhost:456/app برابر باشد اما با http://stackoverflow برابر نيست.
SourceMapPathOverrides  :  نگاشتي از مسير هاي منبع از نگاشت منبع به موقعيت اين منابع روي ديسك است . زماني كه نگاشت منبع دقيق نيست و يا اينكه نميتواند در طول پروسه ساخته شدن fix شود مفيد است.
بخش سمت چپ نگاشت ، الگويي است كه ميتواند شامل يك كلمه باشد و در برابر ورودي هاي SourceRoot + Sources در نگاشت منبع تست خواهد شد . اگر همخواني داشت(مچ بود) فايل منبع با مسير موجود در سمت راست نطبق ميشود . كه ميبايست يك مسير مطلق به سمت فايل منبع روي ديسك باشد . چند تا نگاشت به طور پيشفرض با توجه به تنظيمات پيش فرض براي webpack  و meteor  قرار داده شده است.
 
*********Block of code
 
اگر sourcemappathoverrides را در launch config ست كنيد ، جايگزين تنظيمات پيشفرض مي شود . 
${Workspaceroot}‌  و  ${webroot}  در اينجا ميتواند استفاده شود . اگر مطمئن نيستيد كه سمت چپ چه چيزي بايد باشد، ميتوانيد از دستور .scripts استفاده كنيد . شما همچنين ميتوانيد از امكانات diagnosticlogging/verbosediagnosticlogging براي ديدن محتويات نگاشت منبع، يا مشاهده مسيرهاي منبع، (سورسها) در devtools كروم يا باز كردن فايل js.map و چك كردن مقادير به صورت دستي استفاده كنيد.
 
ExperimentalLibraryCode : آرايه اي از اسم پوشه ها براي ناديده گرفته شدن (رد شدن) در زمان خطايابي . براي مثال اگر expreimentalLIbraryCode : ["jquery.js"] را ست كنيد ، شما هر فايلي به نام jquery.js را زماني كه كدها را گام به گام مرور ميكنيد ، ناديده خواهيد گرفت . 
شما همچنين نميتوانيد روي exception  هايي كه از فايل jquery.js ، ارسال (throw) شده اند، break  بگذاريد . 
اين حالت مانند اسكريپت هاي blackboxing در devtools كروم كار ميكند . 
لازم به ذكر است كه اين فقط يك آزمايش است .فرمت ورودي ها نيز همچنين يكيست، پس شما ميتوانيد 
 
- اسم يك فايل (مثال jquery.js)
- اسم يك پوشه  سرشار از اسكريپت هايي جهت ناديده گرفتن (مانند node_modules)
- يك regex براي ناديده گرفتن تمام اسكريپت هايي كه مچ هستند مانند \min\.js$ 
را اضافه كنيد . 
 
نكته اي در مورد نگاشت هاي منبع lonic/gulp
نگاشت هاي منبع lonic  و gulp   يك ريشه منبع (sourceroot) از */source/* به طور پيشفرض به عنوان خروجي برميگرداند . 
اگر نميتوانيد از طريق launch config اين را ست كنيد من تنظيمات زير را پيشنهاد ميكنم . 
 
****block of code*****
 

رفع اشكال

 
Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222
اين پيغام بدين معناست كه افزونه نميتواند به كروم متصل شود . زيرا كروم در حالت debug اجرا نشده است . براي رفع اين مشكل موارد زير را امتحان كنيد . 
 
- اگر تنظيم نوع launch استفاده ميكنيد ، نسخه هاي ديگر كروم كه در حال اجرا هستند را ببنديد – اگر كروم در حال اجرا باشد، افزونه قادر به متصل شدن نيست . كروم همچنين ميتواند در پس زمينه در حال اجرا باشد حتي زمانيكه تمام پنجره هاي آن بسته است . – taskbar‌ را چك كنيد يا پردازش مربوطه را kill  كنيد يا property userdatadir‌ را به يك مسير موقت ست كنيد . 
كروم اين را ميخواند و يك نسخه جديد را با استفاده از يك پروفايل متفاوت به جاي نمونه هاي در حال اجرا ، اجرا ميكند . 
ست كردن "userdatadir" ميتواند راحتتر باشد . 
${workspaceroot}/.vscode/chrome
 
-  اگر از تنظيم حالت 'attach' استفاده كنيد ، مطمئن شويد كه كروم را با استفاده از –remote-debugging-port=9222 اجرا كرده ايد . و اگر يك نسخه در حال اجرا وجود داشت، مرحله بالا را انجام دهيد. 
مطمئن شويد كه property  ي  port با پورتي كه كروم براي ارتباط remote debugging در حال شنود آن است يكي باشد . كه به طور پيشفرض اين شماره 9222 است.
مطمئن شويد كه هيچ برنامه يا پردازش ديگري از اين پورت استفاده نميكند. حتي وب سرور . 
اگر چيز ديگري روي كامپيوتر شما به local;host:9222 پاسخ ميدهد يك پورت متفاوت ست كنيد.
 
- اگر همه مراحل ديگر جواب نداد و اين پيغام مجددا ديديد ، در مرورگر خود به مسير http://localhost:<port>/json برويد . اگر پاسخي دريافت نشد، موردي در تنظيمات بالادست افزونه اشتباه است . اگر يك صفحه json‌ برگشت ، مطمئن شويد كه پورت موجود در launch config با پورت url  يكي باشد . 
 
موارد كلي كه در صورت برخورد با مشكل ميتوانيد امتحان كنيد
 
- در صورت لزوم مطمئن شويد كه webroot ‌ به درستي تنظيم شده است . 
به دقت به تنظيم sourcemap  خود نگاه كنيد . يك sourcemap مسيري به فايلها دارد و اين افزونه آن مسير را براي پيدا كردن فايلها روي ديسك استفاده ميكند . خاصيت (property) هاي sourceroot  و sources را درون sourcemap چك كنيد و مطمئن شويد كه ميتوانند با خاصيت webroot در launch config براي ساخت مسير درست به سورس فايلهاي اصلي تركيب شوند.
اين افزونه سورس هايي را كه در sourcemap (نگاشت منبع) درون خطي هستند را ناديده ميگيرد.
- شما ممكن است يك setup كه در devtools كروم كار ميكند ، داشته باشيد . ولي نه اين افزونه . زيرا كه مسيرها اشتباه اند ولي devtools كروم محتواي سورس درون خطي را ميخواند . 
- كنسول از نظر هشدارهايي كه اين افزونه در مواردي كه نميتواند متصل شود ، چاپ ميكند چك كنيد.
مطمئن شويد كه كد موجود در كروم با كد موجود در VS.Code يكي باشد . كروم ممكن است يك ورژن قديمي را cash كرده باشد.
اگر breakpoint ها اتصال دارند ، (bind شده اند)  ولي مورد برخورد قرار نگرفته اند ، صفحه را رفرش كنيد .  اگر breakpoint ي را در كدي كه بلافاصله پس از load صفحه اجرا ميشود قرار داده ايد ، به آن برخورد نخواهيد كرد  تا زمانيكه صفحه را رفرش كنيد .
در بخش مربوط به اين افزونه در github مشكل را مطرح كنيد  . فيلد "diagnosticlogging" در launch config را ست كنيد و log ها را زمانيكه خطا را مطرح ميكنيد ضميمه كنيد . ميتوانيد اين فايل را در box توضيحات github درگ كنيد . 
 

دستور Scripts

 اين ويژگي براي فهميدن اينكه افزونه چگونه فايلهاي محيط كاري شما را با فايلهايي كه در كروم اجرا ميشوند نگاشت (map) ميكند بسيار مفيد است . شما ميتوانيد در كنسول ديباگ وارد .Scripts شويد كه ليستي از همه اسكريپت هايي كه در زمان اجرا بارگذاري شده اند و همچنين اطلاعات sourcemap‌ آنها و اينكه چگونه به فايل هاي روي ديسك نگاشت (map) شده اند  ببينيد . 
فرمت آن شبيه زير است . 
 
**** block of code******
 
مثال
 
****block of code****
 
اگر شك داريد كه يك اسكريپت چيست ، براي نمونه آن اسكريپت 'eval' ، شما ميتوانيد از .scripts براي دريافت محتويات آن استفاده كنيد . 
 
 
 
 
 
 
 
 
 
 

 

 

نظرات یا سوالات خودرا با ما درمیان بگذارید

0912 097 5516 :Phone Number
0713 625 1757 :Phone Number