بسیاری از ما میدانیم که میتوانیم نقطه شکست را در داخل ویژوال استودیو قرار دهیم و آن را با اینترنت اکسپلورر برای کدهای جاوا اسکریپت اشکالزدایی کنیم، اما ترجیحات مرورگر ممکن است به دلایل مختلف متفاوت باشد و گاهی اوقات لازم است برنامه را در Google Chrome باز کنیم. بنابراین، Visual Studio 2017 از اشکال زدایی کد جاوا اسکریپت با استفاده از Google Chrome نیز پشتیبانی می کند.
در حال حاضر، ویژوال استودیو 2017 و سی شارپ 7 جدیدترین موضوعاتی هستند که باید یاد بگیرند و این ششمین مقاله من در مورد ویژوال استودیو 2017 و C#7 است. در زیر پیوندهای مقالات قبلی من است که به شما توصیه می کنم از آنها سر بزنید.
اشکال زدایی کد جاوا اسکریپت با اینترنت اکسپلورر
اگر از نحوه فعال کردن اشکال زدایی اسکریپت در اینترنت اکسپلورر آگاه نیستید، در زیر یک اسکرین شات برای مرجع شما آورده شده است.
برخی از آخرین نسخههای ویژوال استودیو وقتی میخواهید با اینترنت اکسپلورر اشکالزدایی کنید، آن را بهطور خودکار فعال میکنند.
اشکال زدایی کد جاوا اسکریپت با گوگل کروم با استفاده از ویژوال استودیو 2017
قبل از ویژوال استودیو 2017، نمیتوانستیم کد جاوا اسکریپت را با گوگل کروم با استفاده از ویرایشگرهای ویژوال استودیو اشکال زدایی کنیم. اما Visual Studio 2017 این قابلیت را به صورت پیش فرض ارائه می کند. بیایید یک نسخه نمایشی کوچک از نحوه کار آن را ببینیم.
- Visual Studio 2017 را باز کنید.
- با Visual Studio 2017 یک پروژه وب خالی جدید ایجاد کنید.
- یک صفحه HTML با نام index.html اضافه کنید.
- مقداری کد جاوا اسکریپت را در فایل index.html بنویسید تا اشکال زدایی شود. در زیر یک کد HTML کامل وجود دارد که من قصد دارم از آن با این برنامه آزمایشی استفاده کنم.
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Demo for Debugging Visual Studio with Google chrome for JavaScript</title>
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
- </head>
- <body>
- <script type="text/javascript">
- function Calculate() {
- var x = parseInt(MyCalculator.firstNumber.value);
- var y = parseInt(MyCalculator.secondNumber.value);
- if (x === undefined || isNaN(x)) x = 0;
- if (y === undefined || isNaN(y)) y = 0;
- var result = x + y;
- MyCalculator.txtResult.value = result;
- }
- </script>
- <form class="form-horizontal" name="MyCalculator">
- <h2 class="col-sm-offset-2">Add Two Numbers</h2>
- <div class="form-group">
- <label class="control-label col-sm-2" for="firstNumber">First Number :</label>
- <div class="col-sm-4">
- <input type="number" class="form-control" name="firstNumber" id="firstNumber" min="0" onchange="Calculate()" placeholder="Enter First Name">
- </div>
- </div>
- <div class="form-group">
- <label class="control-label col-sm-2" for="secondNumber">Second Number :</label>
- <div class="col-sm-4">
- <input type="number" class="form-control" name="secondNumber" id="secondNumber" min="0" onchange="Calculate()" placeholder="Enter Second Name">
- </div>
- </div>
- <div class="form-group">
- <label class="control-label col-sm-2" for="txtResult">Sum :</label>
- <div class="col-sm-4">
- <input type="number" class="form-control" name="txtResult" id="txtResult" placeholder="Result" disabled>
- </div>
- </div>
- <div class="form-group">
- <div class="col-sm-offset-2 col-sm-4">
- <button type="button" class="btn btn-default" onclick="Calculate()">Calculate</button>
- </div>
- </div>
- </form>
- </body>
- </html>
- مرورگر را به عنوان Google Chrome انتخاب کنید و دیباگر را در جاوا اسکریپت قرار دهید. برای مرجع به اسکرین شات زیر مراجعه کنید.
- برنامه را اجرا کنید. قبل از نمایش صفحه واقعی، متوجه خواهید شد که Google Chrome صفحه ای مشابه تصویر زیر را نمایش می دهد.
- پس از مدتی، صفحه واقعی خود را خواهید دید. مقداری را برای محاسبه وارد کنید و بر روی دکمه "محاسبه" کلیک کنید تا مجموع عدد اول و دوم محاسبه شود.
اگر به کد HTML کامل نگاه کنید، متوجه خواهید شد که من متد Calculate () را در رویداد onchange textbox نیز فراخوانی کرده ام، بنابراین دیباگر پس از فعال شدن رویداد onchange یا با کلیک بر روی دکمه "ارسال" به کد جاوا اسکریپت واقعی می رود.
- در تصویر زیر می بینید که دیباگر کد واقعی جاوا اسکریپت را فراخوانی کرده است. من مقادیری را پین کرده ام که در حین اشکال زدایی ارزیابی می شوند و همچنین می توانید متوجه شوید که وقتی روی دکمه کشویی ادامه کلیک می کنم، نشان می دهد که در حال حاضر برنامه در Google Chrome در حال اجرا است.
بنابراین، در ویژوال استودیو 2017، میتوانیم کدهای جاوا اسکریپت و تایپ اسکریپت را اشکال زدایی کنیم و در صورت بروز خطا به طور خودکار خراب میشود. اما لطفاً یک نکته را در نظر داشته باشید که اگر ابزار Developer Tool را در کروم باز کنید، جلسه اشکالزدایی اسکریپت را متوقف میکند.
اشکال زدایی کروم به طور پیش فرض در ویژوال استودیو 2017 فعال است، اما در غیر این صورت، می توانید Ctrl+Q را فشار دهید و «Enable JavaScript debugging» را جستجو کنید و چک باکس را برای فعال کردن آن علامت بزنید.