Skip to content

Developer console #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 2, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 29 additions & 29 deletions 1-js/01-getting-started/4-devtools/article.md
Original file line number Diff line number Diff line change
@@ -1,63 +1,63 @@
# Developer console
# Ծրագրավորման բարձակ (Developer console)

Code is prone to errors. You will quite likely make errors... Oh, what am I talking about? You are *absolutely* going to make errors, at least if you're a human, not a [robot](https://en.wikipedia.org/wiki/Bender_(Futurama)).
Կոդը կարող է պարունակել սխալներ: Դուք ամենայն հավանականությամբ թույլ կտաք սխալներ ... Օ, ինչի՞ մասին եմ խոսում: Դուք *անպայման* սխալներ եք գործելու, եթե դուք իհարկե մարդ եք, ոչ թե [ռոբոտ](https://en.wikipedia.org/wiki/Bender_(Futurama))։

But in the browser, users don't see errors by default. So, if something goes wrong in the script, we won't see what's broken and can't fix it.
Բայց զննիչում օգտվողները հիմնականում չեն տեսնում սխալներ: Այսպիսով, եթե սցենարում ինչ-որ բան այն չէ, մենք չենք տեսնի, թե որն է սխալը և չենք կարող շտկել այն:

To see errors and get a lot of other useful information about scripts, "developer tools" have been embedded in browsers.
Սխալները տեսնելու և սցենարների վերաբերյալ շատ այլ օգտակար տեղեկություններ ստանալու համար «ծրագրավորման գործիքները» տեղադրվել են վեբ զննիչներում:

Most developers lean towards Chrome or Firefox for development because those browsers have the best developer tools. Other browsers also provide developer tools, sometimes with special features, but are usually playing "catch-up" to Chrome or Firefox. So most developers have a "favorite" browser and switch to others if a problem is browser-specific.
Ծրագրավորողներից շատերը ծրագրավորման համար օգտագործում են Chrome կամ Firefox, քանի որ այդ զննիչներն ունեն ծրագրավորման լավագույն գործիքները: Մյուս զննիչներն էլ տրամադրում են ծրագրավորման գործիքներ, որոնք երբեմն ունեն հատուկ առանձնահատկություններ, բայց սովորաբար դրանք նման են Chrome-ի կամ Firefox-ի ծրագրավորման գործիքներին: Այսպիսով, ծրագրավորողների մեծամասնությունը ունի «սիրված» զննիչ և անցնում է մյուս զննիչներին, եթե խնդիրը հատուկ է տվյալ զննիչին:

Developer tools are potent, they have many features. To start, we'll learn how to open them, look at errors, and run JavaScript commands.
Ծրագրավորման գործիքները ուժեղ են, դրանք շատ առանձնահատկություններ ունեն: Սկսելու համար մենք կսովորենք, թե ինչպես բացել դրանք, դիտել սխալները և գործարկել JavaScript հրամաններ:

## Google Chrome

Open the page [bug.html](bug.html).
Բացեք [bug.html](bug.html) էջը։

There's an error in the JavaScript code on it. It's hidden from a regular visitor's eyes, so let's open developer tools to see it.
Այնտեղ JavaScript կոդի մեջ սխալ կա: Այն թաքնված է սովորական այցելուի աչքից, ուստի եկեք բացենք ծրագրավորման գործիքները՝ այն տեսնելու համար:

Press `key:F12` or, if you're on Mac, then `key:Cmd+Opt+J`.
Սեղմեք `key:F12` կամ, եթե ունեք Mac, սեղմեք `key:Cmd+Opt+J`։

The developer tools will open on the Console tab by default.
Ծրագրավորման գործիքները ինքնուրույն կբացվեն բարձակի ներդիրում:

It looks somewhat like this:
Դա ունի այսպիսի տեսք։

![chrome](chrome.png)

The exact look of developer tools depends on your version of Chrome. It changes from time to time but should be similar.
Ծրագրավորման գործիքների տեսքը կախված է Chrome-ի տարբերակից: Այն ժամանակ առ ժամանակ փոխվում է, բայց պետք է հիմնականում նման լինի:

- Here we can see the red-colored error message. In this case, the script contains an unknown "lalala" command.
- On the right, there is a clickable link to the source `bug.html:12` with the line number where the error has occurred.
- Այստեղ մենք կարող ենք տեսնել կարմիրով գունավորված սխալի հաղորդագրությունը: Այս դեպքում սցենարը պարունակում է անհայտ «lalala» հրաման:
- Աջ կողմում կա աղբյուրի վրա սեղմվող հղում `bug.html:12` տողի համարով, որտեղ սխալը տեղի է ունեցել:

Below the error message, there is a blue `>` symbol. It marks a "command line" where we can type JavaScript commands. Press `key:Enter` to run them.
Սխալի հաղորդագրության տակ կա կապույտ գույնի `>` նշան։ Այն նշում է այն տողը, որտեղ մենք կարող ենք մուտքագրել JavaScript հրամաններ: Սեղմեք `key:Enter` դրանք գործարկելու համար:

Now we can see errors, and that's enough for a start. We'll come back to developer tools later and cover debugging more in-depth in the chapter <info:debugging-chrome>.
Այժմ մենք կարող ենք տեսնել սխալները, որը բավական է սկզբի համար: Ավելի ուշ մենք կանդրադառնանք ծրագրավորման գործիքներին և ավելի խորը կծանոթանանք սխալների ողղմանը հետևյալ գլխում <info:debugging-chrome>.

```smart header="Multi-line input"
Usually, when we put a line of code into the console, and then press `key:Enter`, it executes.
```smart header="Բազմատող մուտք"
Սովորաբար, երբ մենք կոդ ենք գրում բարձակի (console) մեջ և սեղմում ենք `key:Enter`, այն կատարվում է:

To insert multiple lines, press `key:Shift+Enter`. This way one can enter long fragments of JavaScript code.
Բազմաթիվ տողեր ներմուծելու համար սեղմեք `key:Shift+Enter`։ Այս կերպ կարելի է մուտքագրել JavaScript կոդի երկար ֆրագմենտներ:
```

## Firefox, Edge, and others
## Firefox, Edge, և ուրիշները

Most other browsers use `key:F12` to open developer tools.
Շատ այլ զննիչներ օգտագործում են `key:F12` ծրագրավորման գործիքները բացելու համար:

The look & feel of them is quite similar. Once you know how to use one of these tools (you can start with Chrome), you can easily switch to another.
Նրանց տեսքը և աշխատանքը բավականին նման է: Երբ իմանաք, թե ինչպես օգտագործել այս գործիքներից մեկը (կարող եք սկսել Chrome-ից), կարող եք հեշտությամբ անցնել մյուսին:

## Safari

Safari (Mac browser, not supported by Windows/Linux) is a little bit special here. We need to enable the "Develop menu" first.
Safari (Mac զննիչ, հասանելի չէ Windows և Linux ՕՀ-երում) այն մի փոքր առանձնահատուկ է: Մենք նախ պետք է միացնենք «ծրագրավորման գործիքները»:

Open Preferences and go to the "Advanced" pane. There's a checkbox at the bottom:
Բացեք Preferences էջը և գնացեք "Advanced" պատուհան։ Ներքևում checkbox կա ծրագրավորման գործիքների համար։

![safari](safari.png)

Now `key:Cmd+Opt+C` can toggle the console. Also, note that the new top menu item named "Develop" has appeared. It has many commands and options.
Հիմա `key:Cmd+Opt+C` կարող է բացել բարձակը (console): Նաև նշենք, որ հայտնվել է «ծրագրավորման գործիքներ» անվանմամբ ընտրացանկի նոր վերին կետը: Այն ունի շատ հրամաններ և տարբերակներ:

## Summary
## Ամփոփում

- Developer tools allow us to see errors, run commands, examine variables, and much more.
- They can be opened with `key:F12` for most browsers on Windows. Chrome for Mac needs `key:Cmd+Opt+J`, Safari: `key:Cmd+Opt+C` (need to enable first).
- Ծրագրավորման գործիքները մեզ թույլ են տալիս տեսնել սխալներ, գործարկել հրամաններ, ուսումնասիրել փոփոխականները և ավելին:
- Դրանք կարելի է բացել `key:F12` Windows-ի համար նախատեսված շատ զննիչներում՝ օրինակ Chrome-ում։ Mac-ի համար պետք է սեղմել `key:Cmd+Opt+J`, Safari: `key:Cmd+Opt+C` (բայց անհրաժեշտ է նախ ակտիվացնել).

Now we have the environment ready. In the next section, we'll get down to JavaScript.
Այժմ մեր միջավայրը պատրաստ է: Հաջորդ բաժնում մենք կանդրադառնանք JavaScript- ին:
4 changes: 2 additions & 2 deletions 1-js/01-getting-started/index.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
# An introduction
# Ներածություն

About the JavaScript language and the environment to develop with it.
JavaScript լեզվի և այն միջավայրի մասին, որով ծրագրավորելու ենք: