Skip to content

Commit 9d590f7

Browse files
committed
fix: update devtools 1 to be about JS
1 parent 05a1841 commit 9d590f7

File tree

1 file changed

+5
-5
lines changed

1 file changed

+5
-5
lines changed

sources/academy/webscraping/scraping_basics_javascript2/01_devtools_inspecting.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ Now let's peek behind the scenes of a real-world website—say, Wikipedia. We'll
2929

3030
![Wikipedia with Chrome DevTools open](./images/devtools-wikipedia.png)
3131

32-
Websites are built with three main technologies: HTML, CSS, and JavaScript. In the **Elements** tab, DevTools shows the HTML and CSS of the current page:
32+
Apart from JavaScript, websites are built with two main technologies: HTML and CSS. In the **Elements** tab, DevTools shows the HTML and CSS of the current page:
3333

3434
![Elements tab in Chrome DevTools](./images/devtools-elements-tab.png)
3535

@@ -57,9 +57,9 @@ HTML, a markup language, describes how everything on a page is organized, how el
5757
}
5858
```
5959

60-
While HTML and CSS describe what the browser should display, [JavaScript](https://developer.mozilla.org/en-US/docs/Learn/JavaScript) is a general-purpose programming language that adds interaction to the page.
60+
While HTML and CSS describe what the browser should display, JavaScript adds interaction to the page. In DevTools, the **Console** tab allows ad-hoc experimenting with JavaScript.
6161

62-
In DevTools, the **Console** tab allows ad-hoc experimenting with JavaScript. If you don't see it, press **ESC** to toggle the Console. Running commands in the Console lets us manipulate the loaded page—we’ll try this shortly.
62+
If you don't see it, press **ESC** to toggle the Console. Running commands in the Console lets us manipulate the loaded page—we’ll try this shortly.
6363

6464
![Console in Chrome DevTools](./images/devtools-console.png)
6565

@@ -103,13 +103,13 @@ Encyclopedia
103103

104104
## Interacting with an element
105105

106-
We won't be creating Python scrapers just yet. Let's first get familiar with what we can do in the JavaScript console and how we can further interact with HTML elements on the page.
106+
We won't be creating Node.js scrapers just yet. Let's first get familiar with what we can do in the DevTools console and how we can further interact with HTML elements on the page.
107107

108108
In the **Elements** tab, with the subtitle element highlighted, let's right-click the element to open the context menu. There, we'll choose **Store as global variable**. The **Console** should appear, with a `temp1` variable ready.
109109

110110
![Global variable in Chrome DevTools Console](./images/devtools-console-variable.png)
111111

112-
The Console allows us to run JavaScript in the context of the loaded page, similar to Python's [interactive REPL](https://realpython.com/interacting-with-python/). We can use it to play around with elements.
112+
The Console allows us to run code in the context of the loaded page. We can use it to play around with elements.
113113

114114
For a start, let's access some of the subtitle's properties. One such property is `textContent`, which contains the text inside the HTML element. The last line in the Console is where your cursor is. We'll type the following and hit **Enter**:
115115

0 commit comments

Comments
 (0)