window
命令使用
找打chrome安装的位置，
默认在 C:\Program Files\Google\Chrome\Application
然后无头启动
./chrome.exe --headless --remote-debugging-port=9222 https://www.baidu.com
测试是否成功开启
验证是否成功开启headless chrome 的服务
浏览器输入http://localhost:9222，
如果看到如下效果，就说明成功开启。
连接远程端口
如果是本机调试，直接打开：http://localhost:9222/json，效果如下图所示，
可以看到有一个devtoolsFrontendUrl，那就是开发者工具的前端地址，就是一个html应用，
url里面传过去WebSocket调试地址。
打开这个地址就可以看到熟悉的开发者工具了！
注意：这个窗口调试的是远程chrome上的页面。
其他常用命令
其他的一些已知接口：
- http://127.0.0.1:9222/json 查看已经打开的Tab列表
- http://127.0.0.1:9222/json/version 查看浏览器版本信息
- http://127.0.0.1:9222/json/new?http://www.baidu.com 新开Tab打开指定地址
截图
./Chrome --headless --crash-dumps-dir=/Users/admin/screen --screenshot http://www.baidu.com/
linux
安装Chrome
curl https://intoli.com/install-google-chrome.sh | bash
截图
google-chrome-stable --no-sandbox --headless --disable-gpu --screenshot https://www.baidu.com/
远程连接
google-chrome --headless --no-sandbox --remote-debugging-port=9222 https://baidu.com
ChromeDriver
chromeDrive相当于jdbc.driver。如果你学过这个，就很容易理解。即沟通浏览器和程序之间的驱动
根据当前无头浏览器所在环境，是windows还是linux。
以及无头浏览器的版本号 google-chrome --version
下载对应的ChromeDriver
http://chromedriver.storage.googleapis.com/index.html
java调用
前端网页
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>
<title>Document</title>
<style>
.title {
text-align: center;
padding: 30px 0;
}
.wrapp {
padding: 10px 20px;
}
</style>
</head>
<body>
<div class="wrapp">
<h2 class="title">chrome-headless</h2>
<form class="layui-form" action="/chrome_headless" method="post">
<div class="layui-form-item">
<label class="layui-form-label">域名</label>
<div class="layui-input-block">
<input type="text" value="https://www.baidu.com" name="url" required lay-verify="required"
placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">调试</label>
<div class="layui-input-block">
<input type="checkbox" name="debug" value="true" lay-skin="switch">
<span style="color: #999999">本地部署有用</span>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">模式</label>
<div class="layui-input-block modal">
<input type="radio" name="modal" value="pc" title="pc" checked>
<input type="radio" name="modal" value="手机" title="手机">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">宽高</label>
<div class="layui-input-inline">
<input name="width" value="1920" type="number" class="layui-input"
style="width: 60px; display: inline-block">
<input name="height" value="1080" type="number" class="layui-input"
style="width: 60px; display: inline-block">
<span style="color: #999999">pc模式有用</span>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">行为</label>
<div class="layui-input-block">
<select name="action" lay-verify="required">
<option value="screenshot">截图</option>
<option value="screenshot">还是截图</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
layui.use('form', function () {
const form = layui.form;
//监听提交
form.on('submit(formDemo)', async (data) => {
layer.msg('导出中，请不要关闭页面');
return false
});
});
</script>
</body>
</html>
java程序
package com.dshvv.chromeheadless.controller;
import com.sun.org.apache.xpath.internal.objects.XString;
import org.openqa.selenium.Dimension;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeOptions;
import org.springframework.core.io.FileSystemResource;
import org.springframework.http.HttpHeaders;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import java.io.File;
import java.io.IOException;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.chrome.ChromeDriver;
import org.apache.commons.io.FileUtils;
import org.springframework.web.servlet.ModelAndView;
@RequestMapping
@RestController
public class OtherController {
@GetMapping("/")
public ModelAndView home() {
return new ModelAndView("index");
}
@PostMapping("/chrome_headless")
public ResponseEntity<FileSystemResource> screen(String url, Boolean debug, String modal, String action, int width, int height) throws Exception {
// 设置Driver路径
// String driverPath = "C:/Program Files/Google/Chrome/Application/chromedriver.exe";
String driverPath = "/mydata/chromedriver";
System.setProperty("webdriver.chrome.driver", driverPath);
// 创建Driver配置项
ChromeOptions options = new ChromeOptions();
Map<String, String> mobileEmulation = new HashMap<String, String>();
if (debug == null || !debug) {
options.addArguments("--headless", "--disable-gpu", "--no-sandbox");
options.addArguments("--disable-dev-shm-usage");
}
if (modal.equals("手机")) {
mobileEmulation.put("deviceName", "Galaxy S III");
options.setExperimentalOption("mobileEmulation", mobileEmulation);
}
// 创建一个Driver对象
WebDriver driver = new ChromeDriver(options);
// 设置宽高
if (modal.equals("pc")) {
driver.manage().window().setSize(new Dimension(width, height));
}
//设置超时时间
driver.manage().timeouts()
.implicitlyWait(10, TimeUnit.SECONDS)
.pageLoadTimeout(10, TimeUnit.SECONDS)
.setScriptTimeout(10, TimeUnit.SECONDS);
// 启动driver浏览网页
driver.get(url);
// 当前页面截图并存储本地
File file = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
HttpHeaders headers = new HttpHeaders();
headers.add("Cache-Control", "no-cache, no-store, must-revalidate");
headers.add("Content-Disposition", "attachment; filename=" + file.getName());
headers.add("Pragma", "no-cache");
headers.add("Expires", "0");
headers.add("Last-Modified", new Date().toString());
headers.add("ETag", String.valueOf(System.currentTimeMillis()));
// 关闭driver
if (debug == null || !debug) {
driver.quit();
}
return ResponseEntity.ok().headers(headers).contentLength(file.length()).contentType(MediaType.parseMediaType("application/octet-stream")).body(new FileSystemResource(file));
// 如果是本地，则直接写入本地即可
// try {
// //把截图复制到这个地方
// FileUtils.copyFile(file, new File("C:/Users/admin/Desktop/png/"+new Date().getTime() +".png"));
// } catch (IOException e) {
// System.out.printf("保存截图异常"+e);
// }
}
}
效果预览
