complete article devtools

Author: UyCode

1-js/01-getting-started/4-devtools/article.md

@@ -1,63 +1,56 @@
-# 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)) ئەمەس بەلكى ئىنسانلا بولسىڭىز **چوقۇم** خاتالىق پەيدا قىلىسىز.
+ئەمما تور كۆرگۈچتە بولسا، ئىشلەتكۈچىلەر سۈكۈتتىكى ھالەتتە خاتالىقنى كۆرەلمەيدۇ. شۇڭا، ئەگەر Script بىرەر چاتاق چىقسا، نىمىنىڭ خاتا ئىكەنلىكىنى كۆرەلمەيمىز ھەم ئوڭشاپ بولالمايمىز.
+خاتالىقلارنى كۆرۈش ۋە Scriptگە مۇناسىۋەتلىك نۇرغۇن پايدىلىق ئۇچۇرلارغا ئېرىشىش ئۈچۈن تور كۆرگۈچلەرگە «ئاچقۇچىلار قوراللىرى» (Developer tools) قىتىۋىتىلگەن.
+كۆپىنچە ئاچقۇچىلار Chrome ياكى Firefox دا كودنى ئاچىدۇ ھەم كۆرىدۇ، چۈنكى ئاشۇ تور كۆرگۈچلەر ئەڭ ياخشى ئاچقۇچىلار قوراللىرىغا ئىگە. باشقا تور كۆرگۈچلەرمۇ ئاچقۇچىلار قوراللىرى بىلەن تەمىنلەيدۇ، بەزىدە ھەم باشقا ئالاھىدە ئىقتىدارلىرىمۇ بار، ئەمما ئۇلار ئادەتتە Chrome ياكى Firefox قا ئوخشاش «يامان» بولۇشنى ئويلايدۇ. شۇڭا كۆپىنچە ئاچقۇچىلار ئۆزى «ئەڭ ياخشى كۆرىدىغان» تور كۆرگۈچ بار، ئەمما يولۇققان مەسىلە تور كۆرگۈچكە مۇناسىۋەتلىك بولسا ئامالسىز باشقىلىرىغا ئالماشتۇرىدۇ.
+ئاچقۇچىلار قوراللىرى مول؛ ئۇلارنىڭ نۇرغۇن ئىقتىدارلىرى بار. بىز دەسلەپتە ئۇلارنى قانداق ئېچىشنى، خاتالىقلارغا قاراشنى، شۇنداقلا JavaScript بۇيرۇقىنى ئىجرا قىلىشنى ئۆگىنىمىز.
 
-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.
+## گوگۇل كىروم تور كۆرگۈچ (Google Chrome) 
 
-To see errors and get a lot of other useful information about scripts, "developer tools" have been embedded in browsers.
+ئاۋۋال بۇ [bug.html](bug.html) نى ئاچىمىز.
 
-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.
+ئۈستىدە JavaScript كودىدا خاتالىق بار دەپ چىقىدۇ. خاتالىق زىيارەتچىنىڭ كۆزىدىن يوشۇرۇنغان، شۇڭا بىز ئاچقۇچىلار قوراللىرىنى ئېچىپ كۆرۈپ باقايلى.
 
-Developer tools are potent; they have many features. To start, we'll learn how to open them, look at errors, and run JavaScript commands.
-
-## Google Chrome
-
-Open the page [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.
-
-Press `key:F12` or, if you're on Mac, then `key:Cmd+Opt+J`.
-
-The developer tools will open on the Console tab by default.
-
-It looks somewhat like this:
+كۇنۇپكا تاختىسىدا `F12`، ئەگەر مەك كومپىيوتىر بولسا `Cmd+Opt+J` نى باسىمىز.
+ئاچقۇچىلار قوراللىرى سۈكۈتتىكى ھالەتتە كونسول بېتىدە ئېچىلىدۇ.
+نەتىجىدە ئۈستىدىكى مەزمۇن قارىماققا مۇنداق كۆرۈنىدۇ:
 
 ![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.
-
-- 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.
+ئاچقۇچىلار قوراللىرىنىڭ كونكرېت قىياپىتى سىزنىڭ Chrome تور كۆرگۈچ نۇسخىسىغا باغلىق. ئۇ پات-پات ئۆزگىرىدۇ، ئەمما ئوخشىشىپ ئاساسىي شەكلى ئوخشاش بولىدۇ.
+- ؜بۇ يەردە قىزىل رەڭلىك خاتالىق ئۇچۇرىنى كۆرىۋالالايمىز. بۇنداق ئەھۋالدا Script دا نامەلۇم «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 بۇيرۇقىنى يازالايدىغان «بۇيرۇق قۇرى» بەلگىسى. `Enter` كۇنۇپكىسىنى بېسىپ بۇيرۇقنى ئىجرا قىلىشقا بولىدۇ.
+ھازىر بىز خاتالىقنى كۆرەلەيمىز، بىز ئۈچۈن ھازىرچە مۇشۇ كۇپايە. كېيىنچە <info:debugging-chrome> دىگەن بابتا  ئاچقۇچىلار قوراللىرىغا قايتىپ بۇ ھەقتە تېخىمۇ چوڭقۇرلاپ ئۈگىنىمىز.
 
-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>.
+```smart header="كۆپ قۇرلۇق كود"
+؜ئادەتتە كونسولنىڭ ئىچىگە بىر قۇر كودنى سېلىپ ،ئاندىن `Enter`كۇنۇپكىسىنى باسساق ئىجرا قىلىدۇ.
 
-```smart header="Multi-line input"
-Usually, when we put a line of code into the console, and then press `key:Enter`, it executes.
-
-To insert multiple lines, press `key:Shift+Enter`. This way one can enter long fragments of JavaScript code.
+؜كۆپ قۇر بۇيرۇق يىزىش ئۈچۈن `Shift+Enter` كۇنۇپكىسىنى باسىمىز. بۇنداق بولغاندا كۆپ قۇرلۇق JavaScript كودىنى كىرگۈزگىلى بولىدۇ.
 ```
 
-## Firefox, Edge, and others
 
-Most other browsers use `key:F12` to open developer tools.
 
-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.
+## ؜Edge, Firefox ۋە باشقىلار
+
+باشقا كۆپ قىسىم تور كۆرگۈچلەر `F12` كۇنۇپكىسى ئارقىلىق ئاچقۇچىلار قوراللىرىنى ئاچىدۇ.
 
-## Safari
+ئۇلارنىڭ چىرايى ۋە بىزگە بىردىغان تەسىراتى خېلىلا ئوخشىشىپ كېتىدۇ. بۇ قوراللاردىن بىرىنى قانداق ئىشلىتىشنى بىلسىڭىز (Chrome دىن باشلىسىڭىز بولىدۇ)، باشقىلىرىنىڭ ئاچقۇچىلار قوراللىرىغا ئاسانلا ئالماشتۇرۇپ ئىشلىتىپ كىتەلەيسىز.
 
-Safari (Mac browser, not supported by Windows/Linux) is a little bit special here. We need to enable the "Develop menu" first.
+## سافارى تور كۆرگۈچ (Safari)
 
-Open Preferences and go to the "Advanced" pane. There's a checkbox at the bottom:
+؜Safari (Windows/Linux لار قوللىمايدىغان Mac تور كۆرگۈچى) بۇ يەردە سەل ئالاھىدە. بىز ئاۋۋال «ئاچقۇچى تىزىملىكى» (Developer menu) نى قوزغىتىشىمىز كېرەك.
+تەڭشەكنى ئاچىمىز ۋە «ئىلغار» (Advanced) نى چىكىمىز. ئاستى تەرەپتە بىر توغرا بەلگىسى قويىدىغان تاللاش تەڭشىكى بار:
 
 ![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.
+ئەمدى `Cmd+Opt+C` كۇنۇپكىسىنى بىسىپ كونسولنى ئېچىشقا بولىدۇ. دىققەت قىلساق شۇنى بايقايمىزكى ئەمدى «ئاچقۇچى» (Developer) دىگەن يېڭى بىر تىزىملىك تۈرى پەيدا بولدى. ئۇنىڭدا نۇرغۇن بۇيرۇق ۋە تاللاشلار بار.
 
-## 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).
+- ئاچقۇچىلار قوراللىرى بىزنى خاتالىقلارنى كۆرۈش، بۇيرۇق ئىجرا قىلىش، ئۆزگەرگۈچى مىقدارلارنى تەكشۈرۈش قاتارلىق ئىشلارغا يول قويىدۇ.
+- ؜Windows دىكى كۆپ قىسىم تور كۆرگۈچلەر ئۈچۈن `F12` كۇنۇپكىسى ئارقىلىق ئاچقىلى بولىدۇ. Mac تىكى Chrome دا `Cmd+Opt+J` نى، Safari دا `Cmd+Opt+C` (يۇقىردا دەپ ئۆتكەندەك ئاۋۋال قوزغىتىش كېرەك) نى بىسىپ ئاچىمىز.
 
-Now we have the environment ready. In the next section, we'll get down to JavaScript.
+ئەمدى مۇھىت تەييارلىقى پۈتتى. كېيىنكى قىسىمدىن باشلاپ JavaScript نىڭ ئۆزىنى ئۈگىنىشكە چۈشىمىز.