feat: [week-8]Translation and Update of Chrome DevTools Module (#1325)

stage1/modules/chrome-devtools/README.md

@@ -1,47 +1,50 @@
 # [Stage#1.](../../) Chrome DevTools
 
-## В данном модуле студентам необходимо изучить:
-
-- Вкладка Elements:
-  - нахождение HTML-элемента в DOM-дереве
-  - просмотр и динамическое(но временное) изменение HTML-структуры документа
-  - Просмотр и динамическое(но временное) изменение стилей DOM-элемента
-  - Нахождение в файле стилей (вкладка Source) определенного стиля
-  - Просмотр результирующих стилей, которые применились к HTML-элементу
-- Вкладка Console:
-  - виды логов из js-файла, которые рендерятся во вкладке Сonsole - console.log(), console.info(), console,error().
-  - переход из консоли в строку в файл скрипта(вкладка Source) к источнику лога.
-  - сохранение/очищение логов между перезагрузками страницы
-- Вкладка Source:
-  - просмотр конечной структуры веб-приложения
-  - просмотр содержимого файлов из структуры в подвкладке Page
-  - приведение в читаемый вид содержимого файла при необходимости
-  - точки останова в скрипте
-  - переход между точками останова и пошаговый просмотр выполнения кода
-  - просмотр областей видимости точек основа, текущего состояния переменных
-- Вкладка Network:
-  - просмотр запросов
-  - фильтрация запросов по типам
-  - сохранение/очищение логов запросов между перезагрузками страницы
-  - просмотр информации о запросе - подвкладки Header, Preview, Response, остальное - опционально.
-  - подвкладка Header. Уметь читать информацию:
-    - url запроса
-    - метод запроса
-    - статус запроса
-    - payload запроса (request body или query параметры)
-  - подвкладки Preview, Response
-    - содержимое ответа на запрос
-- Вкладка Application
-  - просмотр и манипуляции с Local Storage (Cookies, Session Storage опционально)
-
-## Приблизительное время прохождения модуля
-
-2 часа
-
-## Теория
-
-- [Видео лекция по Chrome DevTools](https://www.youtube.com/watch?v=gvB0qoio-Ic&list=PLe--kalBDwji8WXKVjhON39X4v_Uj6T_R&index=7) - 1,5 часа
-
-## Практика
-
-1. Вам необходимо пройти тест "DevTools Test" в RS APP > Auto Test
+## Module Overview
+
+In the "Chrome DevTools" module, students explore the comprehensive toolset for web development and debugging. Students navigate the Elements tab for real-time HTML and CSS tweaks, while the Console tab sharpens logging and debugging expertise. With the Sources tab, they explore application structure and code analysis, and the Network tab illuminates the understanding of network requests. Wrapping up with the Application tab, students delve into manipulating local storage, cookies, and an optional peek into session storage.
+
+## In this module, students need to study:
+
+- Elements tab:
+  - [The position of HTML elements in the DOM Tree](https://developer.chrome.com/docs/devtools/dom/#view)
+  - [Inspect and temporarily modify the HTML structure of a document](https://developer.chrome.com/docs/devtools/dom/#content)
+  - [Inspect and temporarily modify the DOM element's styles](https://developer.chrome.com/docs/devtools/css/#view)
+  - [Locate specific styles within a style file (Sources tab)](https://irishdotnet.dev/fridaydevtip-find-the-exact-location-of-where-a-style-is-defined-using-chrome-dev-tools)
+  - [Review the resulting styles applied to HTML element](https://developer.chrome.com/docs/devtools/css/issues/#css-in-computed)
+- [Console tab](https://developer.chrome.com/docs/devtools/console/):
+  - Understand different types of JavaScript logs displayed in the Console panel: [console.log()](https://developer.chrome.com/docs/devtools/console/api/#log), [console.info()](https://developer.chrome.com/docs/devtools/console/api/#info), [console.error()](https://developer.chrome.com/docs/devtools/console/api/#error).
+  - [Navigate from the console to the corresponding log source in the script file (Source tab)](https://developer.chrome.com/docs/devtools/console/log/#javascript)
+  - [Manage log storage: save or clear logs between page reloads](https://developer.chrome.com/docs/devtools/console/reference/#persist)
+- Sources tab:
+  - [Explore the file structure of the web application and delve into the file's content](https://developer.chrome.com/docs/devtools/sources/#files)
+  - [What are breakpoints and why do we need them](https://developer.chrome.com/docs/devtools/javascript/#event-breakpoint)
+  - [Navigate between breakpoints and step through the code](https://developer.chrome.com/docs/devtools/javascript/#code-stepping)
+  - [Inspect the scope and check variable values at specific moments](https://developer.chrome.com/docs/devtools/javascript/#check-values)
+- Network tab:
+  - [Review and analyze network requests](https://developer.chrome.com/docs/devtools/network/#load)
+  - [Filter requests by type](https://developer.chrome.com/docs/devtools/network/reference/#filter-by-type)
+  - [Manage request logs](https://developer.chrome.com/docs/devtools/network/reference/#clear): save or clear logs between page reloads
+  - Inspect request information (Headers, Preview, Response tabs, the rest is optional)
+    - [Headers tab](https://developer.chrome.com/docs/devtools/network/#details). Be able to find the information:
+      - request URL
+      - request method
+      - request status
+      - request payload (request body or query parameters)
+    - [Preview, Response tabs](https://developer.chrome.com/docs/devtools/network/#details)
+    - [Review response content](https://developer.chrome.com/docs/devtools/network/reference/#response)
+- Application tab
+  - [Explore and modify Local Storage (Cookies, Session Storage is optional)](https://developer.chrome.com/docs/devtools/storage/localstorage/)
+
+## Approximate module completion time:
+
+2 hours
+
+## Practice
+
+1. You need to take the "DevTools Test" test in RS APP > Auto Test
+
+## Additional materials
+
+- Webinar Recordings (in Russian): [Chrome DevTools](https://www.youtube.com/watch?v=gvB0qoio-Ic&list=PLe--kalBDwji8WXKVjhON39X4v_Uj6T_R&index=7) - 1,5 hours
+- [What's New in DevTools](https://developer.chrome.com/docs/devtools/news/)