Shulou(Shulou.com)06/02 Report--

This article mainly takes the home page of Baidu as an example to record the various ways to save the page in the Chrome browser (involving some Chrome "tips"). Please try it yourself when using the plug-in. This article only briefly introduces the different processing methods of saving the page without using the plug-in.

System environment: Windows10, Chrome 70.0.3538.110 (official version) (64-bit).

Save offline pages

When it comes to saving pages offline, the first thing that comes to mind is right-click save (Ctrl + S). Saving in this way will save the resources of the current page and put them in a directory. The approximate effect is as follows:

You can use this method when you want to edit the page source code, and if you only want to get a single offline page file for offline viewing, you can try to save the current page as an MHTML document, using plug-ins (Save As MHT, Save As MHTML, etc.) or Chrome native support to do this.

Chrome browser saves pages in MHTML format

Many browsers (IE 5.0 +, Opera 9.0 +, Chrome, etc.) support storing pages in MHTML format, and most browsers that do not support them also have corresponding plug-ins that can handle them.

In Chrome, to save the MHTML format page, you need to open it in the experimental × × setting of Chrome.

First of all, type chrome://flags in the address bar of the Chrome browser to enter the Chrome experiment × × setup page.

Type mhtml in the search box on the page, find the Save Page as MHTML entry (or enter chrome://flags/#save-page-as-mhtml directly in the address bar), set it to Enabled, and then click the RELAUNCH NOW button at the bottom prompt to restart the browser to make the changes take effect.

After restarting the browser, in the page to be saved, right-click, select Save as (or shortcut key Ctrl + S), pop-up Save as window, and save type select web page (single file)

Attached: IE save MHT format page

MHTML (Wikipedia | Baidu Encyclopedia), webpage archiving, also known as single file web page or web page archive, can save a multi-attachment web page as a single document with a .mht or .mhtml extension. IE browsers support saving .mht files, which is briefly introduced below.

In the IE browser, open the link to the Baidu home page that you want to save, and then right-click to save (Ctrl + S). In the save window that appears, select the save type * .mht

At this point, you can see a Baidu MHT file. When the text editor opens, you can see code similar to the following:

Here you can see that the MHTML document is based on Hypertext markup language, and you can see the processed page code.

Save the PDF page

PDF pages in Chrome can be saved through online processing services such as PrintFriendly & PDF (with Chrome plug-in) or using Chrome plug-in (Save As PDF), or by printing.

Save page PDF in Chrome print preview

In the page you want to save, Ctrl + P (or right-click menu-> print (p).), open the page's print browsing interface.

At this point, you can see the print preview effect of the site (the default black and white display). Find the target printer-> change in the left option. In the pop-up selection interface, find Save as PDF, and double-click.

At this point, you can see the color preview of the site, and click the save button on the left to save the site in PDF format.

Save the picture page

In some cases, you may need to capture the page, sometimes only part of the content, which can be done through ordinary screenshot tools, such as QQ screenshot, Wechat screenshot, Windows's own screenshot tools, etc.; and sometimes you may need to take long page images, which can also be achieved by tools, such as FastStone Capture, Chrome plug-ins (FireShot, Full Page Screen Capture) and so on. FastStone Capture and Chrome screenshot methods are briefly introduced here, and other methods will not be discussed in detail.

Screenshot tool to save picture pages

Open the tool FastStone Capture and select the capture Scroll window button to enter the long screenshot window.

FastStone Capture's capture scrolling window can support automatic scrolling window and custom scrolling window, which can be selected as needed to achieve the purpose of intercepting the desired content (custom scrolling screenshots do not work well, it is not easy to control the end time, and the captured images may need to be edited again)

Chrome browser command line menu to save picture pages

Chrome browser developer tools (devtools) also provide command-line menus similar to those in mainstream editors (Sublime Text, Atom, Visual Studio Code, etc.), usually using Ctrl + Shift + P (Cmd + Shift + P on Mac). For example, the command line menu of Sublime Text:

Friends who use Sublime Text should be familiar with this, and the traversal brought by the command-line menu is self-evident.

In the Chrome browser, first F12 opens the DevTools developer tool, and then use the shortcut key Ctrl + Shift + P in DevTools to open the command line menu of Chrome:

In the command line menu, type capture and you will see the following options

As you can see here, the Chrome command line menu provides three commands for interface capture

Capture full size screenshot-intercepts the entire site (long picture) Capture node screenshot-intercepts the selected DOM node Capture screenshot-intercepts the part displayed in the view window

Enter the corresponding command on the command line to complete the screenshot.

Attached: screenshot of mobile view of Chrome browser site

The method of intercepting the site is introduced above, and it is added here that when you want to intercept the site to respond to the display under different pixels, it is similar to the method of intercepting the length of the mobile end.

Also in the Chrome browser, open DevTools, click the button, and click toggle device toolbar (toggle device toolbar). You can see an effect similar to the following:

In this toolbar, you can view the display of the site at different resolutions by switching between different devices (different resolutions), which can assist the responsive development of the site. In this view, you can open the menu by clicking the three points on the far right of the top menu item, which has the option of capturing the screen, as follows:

Headless Chrome mode completes the screenshot of the page and saves the PDF

Headless Chrome is shipping in Chrome 59. It's a way to run the Chrome browser in a headless environment. Essentially, running Chrome without chrome! It brings all modern web platform features provided by Chromium and the Blink rendering engine to the command line.

Headless Chrome,Headless Chrome is supported in Chrome 59 and above. It is possible to run Chromium and Blink rendering engines in command line mode. Many browser operations can be done without a UI window, and it is an excellent tool for automated testing and server environments. For more information, see the official instructions.

Headless Chrome Save Page

Run the command line window in administrator mode, use the cd command to enter the Chrome browser installation directory, and enter a command similar to the following:

Chrome-headless-disable-gpu-dump-dom https://www.baidu.com

Tested, it seems to have no effect, the specific reason is not clear. If you have friends who know, I hope you can give us some advice!

Headless Chrome saves the page PDF

Run the command line window in administrator mode, use the cd command to enter the Chrome browser installation directory, and enter a command similar to the following:

Chrome-- headless-- disable-gpu-- print-to-pdf=' storage path\ file name 'https://www.baidu.com

Note that if the storage path and file name are not given here, the saved pdf can be called output.pdf under the directory file of the corresponding version number under the installation directory of the Chrome browser

Screenshot of Headless Chrome page

Run the command line window in administrator mode, use the cd command to enter the Chrome browser installation directory, and enter a command similar to the following:

Chrome-- headless-- disable-gpu-- screenshot=' storage path\ file name 'https://www.baidu.com## sets the picture size (the size seems to be useless, the specific function is self-studied) chrome-- headless-- disable-gpu-- screenshot=' storage path\ file name'-- window-size= width, high https://www.baidu.com

Note that if the storage path and file name are not given here, the saved pdf can be called output.pdf under the directory file of the corresponding version number under the installation directory of the Chrome browser

Puppeteer

Puppeteer (Node library encapsulated with Headless Chrome) officially launched by Chrome can perform most of the operations performed manually in browsers:

Generate screenshots and PDF of the page. Grab SPA (single page application) and generate pre-rendered content (that is, "× ×" (server-side rendering). Automate form submission, UI testing, keyboard input, etc. Create the latest automated test environment. Run the test directly in the latest version of Chrome using the latest JavaScript and browser features. Capture the timeline trace of the site to help diagnose performance problems.

Test the Chrome extension.

For more information on the specific features of the library, please see here | Github address.

Similarly, try PhantomJS, a headless browser that can write scripts.

Read the command menu in the Chrome developer tool DevTools Digest: More Power with the New Command Menu-- Google developersChrome DevTools: Use the Command Menu to access almost everything in DevTools in a few keystrokesHeadless_software-- Wikipedia chromeless (maintenance has been stopped, Puppeteer is recommended) use Chrome Headless mode to convert HTML to PDFChromium command line switch list

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.