How to download files with Developer tools

Do you remember the initial scene from the movie, where the world is ruled by a computer and the main character sits in front of the monitor and a message popped up?

Guess what he was doing at that moment?

No?

He downloaded pictures from the Internet with the help of this note!

So let's get started.

When any browser opens any page it downloads the page and almost all files from this page to the directory on disk.

With the exception of video and music files. To start download videos and music to cache click the play button on it.

Therefore, our task is to get files from this directory.

Next, quite a bit of hacker action to get the required.

Save as

For the simplest downloading of pictures in any browser you need:

1. Right-click on the desired image.
2. In the appeared menu select the item that looks like Save image as or Save target as.
3. Next, the usual dialog box to save the file.

Developer tools

In many cases, the picture can not just be saved, for example, it is the background and covered by other elements of the page.

In this case, you need to use Developer tools, these tools are usually used by programmers and hackers.

We’ll look at working with tools using the example of the Chrome browser; in other browsers, these tools and actions are similar.

Open "Developer Tools"

The Chrome developer toolkit is called Developer tools. :)

1. Open the View menu.
2. Open the Developer submenu.
3. Click the Developer tools.

Or a combination Ctrl+Shift+J for Windows and Linux and Cmd+Alt+I for Mac OS.

Download picture

Pictures can be used as a background picture or directly. The procedure is a bit different, but the essence, as always - is the same.

1. Open Developer Tools.
2. Go to theElements tab.
3. Click on the pointer icon and then hover the mouse over the element of interest on the page and click on it.

"Src" attribute

If the image is used in the <img element get the address of the image from the src attribute:

1. Click on the link in the src attribute with the right mouse button to open menu.
2. Select Open link in new tab.
3. Go to the opened tab.
4. Save the file with the menu File / Save as.

Style attributes

If the picture is used as the background of the found element look for the address of the image in css style of the element.

1. Go to the right half and open the Styles tab.
2. Look for something similar to the address of the image in the styles.
3. Click on the address with the right mouse button to open the drop-down menu.
4. Select Open link in new tab.
5. Go to the opened tab.
6. Save the image by pressing the Ctrl + S combination or with the File / Save as menu.

Download videos and music

1. Open Developer tools.
2. Go to Network tab.
3. Reload the current page.
4. Click, if available, the button on the music or video you are interested in.
5. Look for a request for files with video or audio extensions (usually .mp4, .avi, .mpeg, and audio files are .mp3, .wav, and so on) in the network access table.
6. Right-click on the found file and select Open link in new tab.
7. Go to the open page.
8. Save the file through the File / Save page as menu.

Entire page

You can save the entire page to a separate directory and search for the necessary files manually by opening them one by one.

1. Open the desired page in your browser.
2. In the File menu, select Save page as.
3. In the dialog box, select the directory and file name of the saved page.
4. Usually the page is saved as the selected name with the extension .html and a directory with the same name containing all resource files.
5. Go to the resource directory and search for the desired file.

Conclusion

Add downloaded files to the video editor and click the create video button.

It's simple ;)