یک برنامه اصلی ایجاد کنید یا هر برنامه زاویه ای موجود را در کد ویژوال استودیو باز کنید. من یک برنامه پایه ایجاد کردم و همان پروژه را در کد VS باز کردم.
![چگونه یک برنامه Angular را در کروم اشکال زدایی کنیم](http://pezhvak24.ir/dl/10kcor/cscd/article/how-to-debug-an-angular-application-in-chrome/Images/How To Debug An Angular Application In Chrome.png)
من app.component.html پیش فرض را با کد زیر تغییر دادم، این یک رابط کاربری با دو جعبه متن ایجاد می کند. فقط به عنوان مثال، من (جمع) دو مقدار را با تابع doSum() در App.component.ts اضافه می کنم تا بتوانم یک نقطه شکست برای آزمایش اشکال زدایی قرار دهم.
App.Component.html
- <div>
- <h1>Basic App for testing debugging in chrome</h1>
- <p>Value 1 <input type="number" placeholder="Enter Value 1" [(ngModel)]="val1"></p>
- <p>Value 1 <input type="number" placeholder="Enter Value 2" [(ngModel)]="val2"></p>
- <p><input type="button" value="Sum" (click)="doSum()"></p>
- <p>Total: {{total}}</p>
- </div>
App.component.ts
- export class AppComponent {
- title = 'debuggingApp';
- val1:number;
- val2:number;
- total:number;
- public doSum()
- {
- this.total=this.val1+this.val2;
- }
- }
پس از ویرایش کد پیشفرض کامپوننت App، برنامه خود را با دستور Angular CLI زیر سرو کنید.
![چگونه یک برنامه Angular را در کروم اشکال زدایی کنیم](http://pezhvak24.ir/dl/10kcor/cscd/article/how-to-debug-an-angular-application-in-chrome/Images/How To Debug An Angular Application In Chrome02.png)
این خروجی شما پس از تغییرات خواهد بود.
![چگونه یک برنامه Angular را در کروم اشکال زدایی کنیم](http://pezhvak24.ir/dl/10kcor/cscd/article/how-to-debug-an-angular-application-in-chrome/Images/How%20To%20Debug%20An%20Angular%20Application%20In%20Chrome03.png)