?????? ??? ??

???? ?? JavaScript ????? ???? ?????. ???? ??? ??? ??? ???? ???? ??? ?????. ?? ??? ???? ????? ?? ??? ???? ?? ????? ????? ??? ??? ?????.

---

1. ???? ??? ??(DevTools)

Chrome, Firefox, Edge, Safari? ??? ???? ? ????? ???? ??? ??? ?? ?? ??? ??? ?????.

?? ??:

• ??: ??, ??, ??? ?????.
• ???: ??? ? ?? ???? ??? ? ????.
• ???? ?: HTTP ?? ? ??? ???????.
• ?? ?: DOM? ??? ??? ?????.
• ?? ?: ? ??? ?????.

?: Chrome DevTools?? ??? ??

1. ????? ??? ??(F12 ?? Ctrl Shift I)? ???.
2. '??' ??? ?????.
3. JavaScript ??? ? ??? ???? ???? ?????.
4. ???? ?? ???? ????? ??? ?? ???? ?? ?????.

---

2. ??? ?? ?? ??

?? ??? ??? ???? ????? ??? ?????.

???? ??:

• console.log(): ?? ??? ?????.
• console.warn(): ??? ?????.
• console.error(): ?? ???? ?????.
• console.table(): ???? ??? ???? ?????.
• console.group() / groupEnd(): ?? ?? ?????.

?:

const user = { name: "Alice", age: 25 };
console.log("User Info:", user);
console.table([user, { name: "Bob", age: 30 }]);

---

3. Visual Studio ?? ???

VS Code? JavaScript ??????? ?? ???? ?????.

??? ??:

1. VS Code?? ????? ???.
2. '?? ? ???' ??(Ctrl Shift D)? ?????.
3. ???? ????? launch.json ??? ?????.
4. ???? ???? ???? ?????.

Node.js ?? ??:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/app.js"
    }
  ]
}

---

4. Node.js ???

Node.js?? ???? ???? ????. ????? ?????? ?? ???? ?????.

?:

node --inspect-brk app.js

?? ?? Chrome?? chrome://inspect? ?? ??????? ??????.

---

5. ?? ??? ??

?? ??

• ESLint: ??? ?? ??? ???? ???? ??? ?? ???? ??? ?????.

???? ??

• React ??? ??: React ?????? ???????.
• Redux DevTools: Redux ?? ??? ???? ????? ? ?????.

???? ? ?? ??

• Sentry: ??? ?? ? ?? ??? ?????.
• LogRocket: ??, ?? ? ??? ?????.

---

6. ??? ??? ??

? ??????? ??? ??

• ??? ?? ???? ? ???? ?? Live Server ?? Browsersync? ?? ??? ?????.

? ?? ??(HMR)

• React, Vue, Angular? ?? ?????? ???? ?? ??? ??? ??? ????? ? ?? HMR? ?????.

---

7. ??? ? ? ?? ??

1. ??? ??: ??? console.log ?? ????? ????.
2. ?? ???: ??? ?? ??? ???? ????? ??????.
3. ??? ??: ??? ?? ??? ??????.
4. ?? ??? ??: ?? ???? ?? ??? ???? ?? ?? ??? ????.
5. ?? ???: ?? ???? ??? ??? ???? ? ??? ? ? ????.

---

8. ??? ?? ??

?? ??:

const user = { name: "Alice", age: 25 };
console.log("User Info:", user);
console.table([user, { name: "Bob", age: 30 }]);

??? ??:

1. console.log? ???? ?? ??? ?????.
2. ???? ???? ?? ???? ??? ?? ?????.
3. ??? ?? ????? ??? ?????.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/app.js"
    }
  ]
}

---

9. ???? ???

?? ?? ???:

Sentry, New Relic ?? Rollbar? ?? ??? ???? ???? ??? ??? ???????.

?? ??:

????? ?????? ??? ????? ?? ?? ?? ?? ?? ?????.

Webpack? ??? ?? ?:

const user = { name: "Alice", age: 25 };
console.log("User Info:", user);
console.table([user, { name: "Bob", age: 30 }]);

---

10. ??

??? ????? ???? ????? ?????? ??? ??? ??????. ???? ???? DevTools, VS Code, Node.js ??? ? ?? ???? ???? ???? ???? ??? ??????? ??? ? ????. ???? ??? ??? ?? ?? ??? ??? ????? ???? ????? ??????? ???.

?????. ?? Abhay Singh Kathayat???!
?? ?????? ??? ?? ??? ?? ?? ??? ?? ??? ??????. ?? ????? ?? ???? ??? ???? ??????? ???? ?? ??? ????? ?? ? ?????? ???? ?????.
? ???? ???? kaashshorts28@gmail.com?? ???? ?????.

? ??? JavaScript ??? ?????: ?? ?? ??? ?? ?? ? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!