整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
文適合有 Java 基礎(chǔ)知識(shí)的人群
本文作者：HelloGitHub-秦人
HelloGitHub 推出的《講解開(kāi)源項(xiàng)目》系列，今天給大家?guī)?lái)一款開(kāi)源 Java 版一款網(wǎng)頁(yè)元素解析框架——jsoup，通過(guò)程序自動(dòng)獲取網(wǎng)頁(yè)數(shù)據(jù)。
項(xiàng)目源碼地址：https://github.com/jhy/jsoup
jsoup 是一款 Java 的 HTML 解析器。可直接解析某個(gè) URL 地址的 HTML 文本內(nèi)容。它提供了一套很省力的 API，可通過(guò) DOM、CSS 以及類似于 jQuery 選擇器的操作方法來(lái)取出和操作數(shù)據(jù)。
jsoup 主要功能：
將項(xiàng)目導(dǎo)入 idea 開(kāi)發(fā)工具，會(huì)自動(dòng)下載 maven 項(xiàng)目需要的依賴。源碼的項(xiàng)目結(jié)構(gòu)如下：
快速學(xué)習(xí)源碼是每個(gè)程序員必備的技能，我總結(jié)了以下幾點(diǎn)：
git clone https://github.com/jhy/jsoup
通過(guò)上面的方法，我們很快可知 example 目錄是測(cè)試代碼，那我們直接來(lái)運(yùn)行。注：有些測(cè)試代碼需要稍微改造一下才可以運(yùn)行。
例如，jsoup 的 Wikipedia 測(cè)試代碼：
public class Wikipedia {
public static void main(String[] args) throws IOException {
Document doc = Jsoup.connect("http://en.wikipedia.org/").get();
log(doc.title());
Elements newsHeadlines = doc.select("#mp-itn b a");
for (Element headline : newsHeadlines) {
log("%s\n\t%s", headline.attr("title"), headline.absUrl("href"));
}
}
private static void log(String msg, String... vals) {
System.out.println(String.format(msg, vals));
}
}
說(shuō)明：上面代碼是獲取頁(yè)面（http://en.wikipedia.org/）包含（#mp-itn b a）選擇器的所有元素，并打印這些元素的 title , herf 屬性。維基百科 國(guó)內(nèi)無(wú)法訪問(wèn)，所以上面這段代碼運(yùn)行會(huì)報(bào)錯(cuò)。
改造后可運(yùn)行的代碼如下：
public static void main(String[] args) throws IOException {
Document doc = Jsoup.connect("https://www.baidu.com/").get();
Elements newsHeadlines = doc.select("a[href]");
for (Element headline : newsHeadlines) {
System.out.println("href: " +headline.absUrl("href") );
}
}
Jsoup 的工作原理，首先需要指定一個(gè) URL，框架發(fā)送 HTTP 請(qǐng)求，然后獲取響應(yīng)頁(yè)面內(nèi)容，然后通過(guò)各種選擇器獲取頁(yè)面數(shù)據(jù)。整個(gè)工作流程如下圖：
以上面為例：
Document doc = Jsoup.connect("https://www.baidu.com/").get();
這行代碼就是發(fā)送 HTTP 請(qǐng)求，并獲取頁(yè)面響應(yīng)數(shù)據(jù)。
Elements newsHeadlines = doc.select("a[href]");
定義選擇器，獲取匹配選擇器的數(shù)據(jù)。
for (Element headline : newsHeadlines) {
System.out.println("href: " +headline.absUrl("href") );
}
這里對(duì)數(shù)據(jù)只做了一個(gè)簡(jiǎn)單的數(shù)據(jù)打印，當(dāng)然這些數(shù)據(jù)可寫(xiě)入文件或數(shù)據(jù)的。
獲取豆瓣讀書(shū) -> 新書(shū)速遞中每本新書(shū)的基本信息。包括：書(shū)名、書(shū)圖片鏈接、作者、內(nèi)容簡(jiǎn)介（詳情頁(yè)面）、作者簡(jiǎn)介（詳情頁(yè)面）、當(dāng)當(dāng)網(wǎng)書(shū)的價(jià)格（詳情頁(yè)面），最后將獲取的數(shù)據(jù)保存到 Excel 文件。
目標(biāo)鏈接：https://book.douban.com/latest?icn=index-latestbook-all
項(xiàng)目引入 jsoup、lombok、easyexcel 三個(gè)庫(kù)。
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>org.example</groupId>
<artifactId>JsoupTest</artifactId>
<version>1.0-SNAPSHOT</version>
<properties>
<maven.compiler.target>1.8</maven.compiler.target>
<maven.compiler.source>1.8</maven.compiler.source>
</properties>
<dependencies>
<dependency>
<groupId>org.jsoup</groupId>
<artifactId>jsoup</artifactId>
<version>1.13.1</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.12</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>easyexcel</artifactId>
<version>2.2.6</version>
</dependency>
</dependencies>
</project>
public class BookInfoUtils {
public static List<BookEntity> getBookInfoList(String url) throws IOException {
List<BookEntity> bookEntities=new ArrayList<>();
Document doc = Jsoup.connect(url).get();
Elements liDiv = doc.select("#content > div > div.article > ul > li");
for (Element li : liDiv) {
Elements urls = li.select("a[href]");
Elements imgUrl = li.select("a > img");
Elements bookName = li.select(" div > h2 > a");
Elements starsCount = li.select(" div > p.rating > span.font-small.color-lightgray");
Elements author = li.select("div > p.color-gray");
Elements description = li.select(" div > p.detail");
String bookDetailUrl = urls.get(0).attr("href");
BookDetailInfo detailInfo = getDetailInfo(bookDetailUrl);
BookEntity bookEntity = BookEntity.builder()
.detailPageUrl(bookDetailUrl)
.bookImgUrl(imgUrl.attr("src"))
.bookName(bookName.html())
.starsCount(starsCount.html())
.author(author.text())
.bookDetailInfo(detailInfo)
.description(description.html())
.build();
// System.out.println(bookEntity);
bookEntities.add(bookEntity);
}
return bookEntities;
}
/**
*
* @param detailUrl
* @return
* @throws IOException
*/
public static BookDetailInfo getDetailInfo(String detailUrl)throws IOException{
Document doc = Jsoup.connect(detailUrl).get();
Elements content = doc.select("body");
Elements price = content.select("#buyinfo-printed > ul.bs.current-version-list > li:nth-child(2) > div.cell.price-btn-wrapper > div.cell.impression_track_mod_buyinfo > div.cell.price-wrapper > a > span");
Elements author = content.select("#info > span:nth-child(1) > a");
BookDetailInfo bookDetailInfo = BookDetailInfo.builder()
.author(author.html())
.authorUrl(author.attr("href"))
.price(price.html())
.build();
return bookDetailInfo;
}
}
這里的重點(diǎn)是要獲取網(wǎng)頁(yè)對(duì)應(yīng)元素的選擇器。
例如：獲取 li.select("div > p.color-gray") 中 div > p.color-gray 是怎么知道的。
使用 chrome 的小伙伴應(yīng)該都猜到了。打開(kāi) chrome 瀏覽器 Debug 模式，Ctrl + Shift +C 選擇一個(gè)元素,然后在 html 右鍵選擇 Copy ->Copy selector,這樣就可以獲取當(dāng)前元素的選擇器。如下圖：
為了數(shù)據(jù)更好查看，我將通過(guò) jsoup 抓取的數(shù)據(jù)存儲(chǔ)的 Excel 文件，這里我使用的 easyexcel 快速生成 Excel 文件。
Excel 表頭信息
@Data
@Builder
public class ColumnData {
@ExcelProperty("書(shū)名稱")
private String bookName;
@ExcelProperty("評(píng)分")
private String starsCount;
@ExcelProperty("作者")
private String author;
@ExcelProperty("封面圖片")
private String bookImgUrl;
@ExcelProperty("簡(jiǎn)介")
private String description;
@ExcelProperty("單價(jià)")
private String price;
}
生成 Excel 文件
public class EasyExcelUtils {
public static void simpleWrite(List<BookEntity> bookEntityList) {
String fileName = "D:\\devEnv\\JsoupTest\\bookList" + System.currentTimeMillis() + ".xlsx";
EasyExcel.write(fileName, ColumnData.class).sheet("書(shū)本詳情").doWrite(data(bookEntityList));
System.out.println("excel文件生成完畢...");
}
private static List<ColumnData> data(List<BookEntity> bookEntityList) {
List<ColumnData> list = new ArrayList<>();
bookEntityList.forEach(b -> {
ColumnData data = ColumnData.builder()
.bookName(b.getBookName())
.starsCount(b.getStarsCount())
.author(b.getBookDetailInfo().getAuthor())
.bookImgUrl(b.getBookImgUrl())
.description(b.getDescription())
.price(b.getBookDetailInfo().getPrice())
.build();
list.add(data);
});
return list;
}
}
最終的效果如下圖：
以上就是從想法到實(shí)踐，我們就在實(shí)戰(zhàn)中使用了 jsoup 的基本操作。
完整代碼地址：https://github.com/hellowHuaairen/JsoupTest
Java HTML Parser 庫(kù)：jsoup，把它當(dāng)成簡(jiǎn)單的爬蟲(chóng)用起來(lái)還是很方便的吧？
為什么會(huì)講爬蟲(chóng)？大數(shù)據(jù)，人工智能時(shí)代玩的就是數(shù)據(jù)，數(shù)據(jù)很重要。作為懂點(diǎn)技術(shù)的我們，也需要掌握一種獲取網(wǎng)絡(luò)數(shù)據(jù)的技能。當(dāng)然也有一些工具 Fiddler、webscraper 等也可以抓取你想要的數(shù)據(jù)。
教程至此，你應(yīng)該也能對(duì) jsoup 有一些感覺(jué)了吧。編程是不是也特別有意思呢？參考我上面的實(shí)戰(zhàn)案例，有好多網(wǎng)站可以實(shí)踐一下啦～歡迎在評(píng)論區(qū)曬你的實(shí)戰(zhàn)。
家好，我是 Echa。
今天來(lái)分享 50 個(gè)超實(shí)用的 Chrome 瀏覽器擴(kuò)展！
JSON Viewer Pro 用于可視化JSON文件。其核心功能包括：
輸入界面如下：
格式化之后：
JSONVue 是一個(gè)JSON數(shù)據(jù)查看器，主要用來(lái)格式化JSON數(shù)據(jù)：
Library Sniffer 是一款給開(kāi)發(fā)者使用的工具，能夠探測(cè)當(dāng)前網(wǎng)頁(yè)所使用的類庫(kù)、框架和服務(wù)器環(huán)境，為開(kāi)發(fā)者提供了方便。
Wappalyzer 擴(kuò)展可以用來(lái)識(shí)別網(wǎng)站背后的底層技術(shù)。通過(guò)此擴(kuò)展，可以了解特定應(yīng)用程序是否是用 React、Vue、Angular、PHP等編寫(xiě)的。還可以訪問(wèn)有關(guān) Web 服務(wù)器、編程語(yǔ)言、框架、內(nèi)容管理系統(tǒng)、分析的信息工具、數(shù)據(jù)庫(kù)等。
WhatRuns 擴(kuò)展程序只需單擊一下即可找到任何網(wǎng)站上使用的技術(shù)。
使用PerfectPixel插件可以將設(shè)計(jì)圖加載至網(wǎng)頁(yè)中，與已成型的網(wǎng)頁(yè)進(jìn)行重疊對(duì)比，以幫助開(kāi)發(fā)和設(shè)計(jì)人員規(guī)范網(wǎng)頁(yè)像素精度。這是一款可以優(yōu)化前端頁(yè)面顯示的Chrome插件。
可以使用此擴(kuò)展程序快速清除緩存，無(wú)需任何確認(rèn)對(duì)話框、彈出窗口等。可以在選項(xiàng)頁(yè)面上自定義要清除的數(shù)據(jù)和數(shù)量，包括：應(yīng)用程序緩存、緩存、Cookie、下載、文件系統(tǒng)、表單數(shù)據(jù)、歷史記錄、索引數(shù)據(jù)庫(kù)、本地存儲(chǔ)、插件數(shù)據(jù)、密碼和 WebSQL。
VisBug 是一個(gè)使用 JavaScript 構(gòu)建的開(kāi)源網(wǎng)頁(yè)設(shè)計(jì)調(diào)試工具，它可以讓用戶使用點(diǎn)擊式和拖放式界面來(lái)查看網(wǎng)站的元素。
Debug CSS 是一個(gè)幫助調(diào)試CSS的插件。他可以顯示出頁(yè)面元素的輪播，按住Ctrl，并將鼠標(biāo)懸浮在元素上，即可查看其信息：
CSS Viewer 是一款適用于 Web 開(kāi)發(fā)人員的高效 Chrome 擴(kuò)展。顧名思義，CSS 查看器可以顯示將鼠標(biāo)懸停在任何網(wǎng)頁(yè)上的元素的 CSS 屬性。
EditThisCookie 是一個(gè) cookie 管理器。可以添加，刪除，編輯，搜索，鎖定和屏蔽cookies。
React Developer Tools 是開(kāi)源 JavaScript 庫(kù) React 的 Chrome DevTools 擴(kuò)展。它允許我們?cè)?Chrome 開(kāi)發(fā)者工具中檢查 React 組件層次結(jié)構(gòu)。安裝此插件之后，將在 Chrome DevTools 中獲得兩個(gè)新選項(xiàng)卡："?? Components" 和 "?? Profiler"：
Vue.js devtools 是一款基于chrome瀏覽器的用于調(diào)試Vue.js應(yīng)用程序的插件，可以使得開(kāi)發(fā)人員大大提高調(diào)試效率。支持用戶對(duì)DOM結(jié)構(gòu)數(shù)據(jù)結(jié)構(gòu)進(jìn)行解析和調(diào)試功能。
Augury 可以幫助開(kāi)發(fā)人員在 Google Chrome 瀏覽器中調(diào)試和分析 Angular 應(yīng)用程序。
Firebug Lite是火狐瀏覽器中著名的開(kāi)發(fā)者工具firebug插件移植到Chrome中的插件，在Chrome中安裝了Firebug Lite插件以后，開(kāi)發(fā)人員可以像在火狐瀏覽器中使用firebug一樣熟悉的方式來(lái)調(diào)試網(wǎng)頁(yè)內(nèi)容，其包含了基本的HTML、CSS以及Javascript的調(diào)試功能，用于幫助網(wǎng)頁(yè)前端開(kāi)發(fā)工程師快速地調(diào)試網(wǎng)頁(yè)，以便及時(shí)地找到網(wǎng)頁(yè)中的BUG并及時(shí)修復(fù)。
HTML Validator 在 Chrome 的開(kāi)發(fā)者工具中添加了 HTML Validator。HTML 頁(yè)面的錯(cuò)誤數(shù)通過(guò)瀏覽器狀態(tài)欄中的圖標(biāo)顯示，詳細(xì)信息可以在瀏覽器的開(kāi)發(fā)者工具中查看。
Web Developer 擴(kuò)展為帶有各種 Web 開(kāi)發(fā)工具的瀏覽器添加了一個(gè)工具欄按鈕。該擴(kuò)展適用于 Chrome 和 Firefox，并且可以在這些瀏覽器支持的任何平臺(tái)上運(yùn)行，包括 Windows、macOS 和 Linux。
Requestly 是一款Chrome和Firefox瀏覽器插件，提供URL轉(zhuǎn)發(fā)、修改HTTP請(qǐng)求和結(jié)果、插入腳本等功能。
Window Resizer 主要用來(lái)調(diào)整瀏覽器窗口的大小以模擬各種屏幕分辨率。
Responsive Viewer 是在一個(gè)視圖中顯示多個(gè)屏幕的 Chrome 擴(kuò)展程序。該擴(kuò)展將幫助前端開(kāi)發(fā)人員在開(kāi)發(fā)響應(yīng)式網(wǎng)站/應(yīng)用程序時(shí)測(cè)試多個(gè)屏幕。
此插件允許直接從瀏覽器發(fā)送跨域請(qǐng)求，而不會(huì)收到跨域錯(cuò)誤。可以使用此插件覆蓋 Request Origin 標(biāo)頭，并將 Access-Control-Allow-Origin 設(shè)置為 *.
ColorPick Eyedropper 是一個(gè)放大的吸管和顏色選擇器工具，可讓從網(wǎng)頁(yè)等中選擇顏色值。
CSS Peeper 用于檢查和復(fù)制元素樣式的優(yōu)秀工具，使用 CSSPeeper 可以將鼠標(biāo)懸停在網(wǎng)頁(yè)中的任何元素上，然后單擊鼠標(biāo)即可復(fù)制元素的樣式。
24. Dimensions
Dimensions是一款能幫助使用者對(duì)網(wǎng)頁(yè)上各種元素屬性之間的距離進(jìn)行測(cè)量的Chrome頁(yè)面元素測(cè)量插件，該插件在點(diǎn)擊啟動(dòng)插件圖標(biāo)后，可以對(duì)頁(yè)面中圖像、輸入字段、按鈕以及視頻等頁(yè)面元素之間上下左右的方位尺寸進(jìn)行測(cè)量，同時(shí)還可以通過(guò)使用快捷鍵來(lái)快速啟用或關(guān)閉該插件的功能，簡(jiǎn)單實(shí)用。
Site Palette 用于生成調(diào)色板。設(shè)計(jì)師和前端開(kāi)發(fā)人員必備的工具。可以通過(guò)這款插件輕松獲取網(wǎng)站的配色方案。
ColorZilla 是一款功能強(qiáng)大地提取網(wǎng)頁(yè)色彩的工具；也是個(gè)快速的對(duì)顏色進(jìn)行調(diào)節(jié)的Chrome插件，許多的用戶將這款軟件稱呼為顏色吸取插件，它提取的顏色是非常的多樣化，還可生產(chǎn)css顏色的代碼等。
當(dāng)我們想查看網(wǎng)頁(yè)中文字的字體時(shí)，最常用的方法就是在控制臺(tái)查看文字的字體樣式。那還有沒(méi)有更簡(jiǎn)單的方法呢？WhatFont 就是一個(gè)查看網(wǎng)頁(yè)字體的Chrome擴(kuò)展。只需要的點(diǎn)擊擴(kuò)展圖標(biāo)，再點(diǎn)需要查看為文字即可：
Fonts Ninja 可以從任何網(wǎng)站識(shí)別字體、添加書(shū)簽、試用并購(gòu)買(mǎi)它們。
使用 BrowserStack 快速啟動(dòng)擴(kuò)展在任何瀏覽器中啟動(dòng)一個(gè)新的測(cè)試會(huì)話。最多可設(shè)置 12 個(gè)瀏覽器以實(shí)現(xiàn)快速訪問(wèn)并最大限度地減少切換瀏覽器所花費(fèi)的時(shí)間。
Toby 是一款 Chrome 新標(biāo)簽頁(yè)工具，能夠?qū)⑽醋x的標(biāo)簽頁(yè)分組顯示在新標(biāo)簽頁(yè)中，這樣就能把所有未看完的標(biāo)簽頁(yè)都關(guān)閉了。分組相當(dāng)于多個(gè) Chrome 窗口，將你的標(biāo)簽頁(yè)都拖進(jìn) Toby 中，就不需要實(shí)時(shí)開(kāi)著占地方了。
該擴(kuò)展提供了每日熱門(mén)開(kāi)發(fā)者新聞，不需要再浪費(fèi)時(shí)間搜索高質(zhì)量的文章了。
Momentum 擁有漂亮的新標(biāo)簽頁(yè)面，每日更新精彩背景壁紙圖片，可設(shè)置每日新鮮事焦點(diǎn)以及跟蹤待辦事項(xiàng)，無(wú)廣告，無(wú)彈窗。
The Great Suspender 是一個(gè)輕量級(jí)的擴(kuò)展用來(lái)減少 Chrome 的內(nèi)存占用。如果同時(shí)打開(kāi)許多選項(xiàng)卡，在可配置的時(shí)間之后未查看的選項(xiàng)卡將在后臺(tái)自動(dòng)掛起，從而釋放該選項(xiàng)卡消耗的內(nèi)存和 CPU。
Session Buddy是一個(gè)可以幫助用戶查看、新增、編輯當(dāng)前網(wǎng)站Session狀態(tài)的Chrome插件。用戶可以利用該插件保存網(wǎng)站當(dāng)前的狀態(tài)以便在關(guān)閉Chrome或關(guān)閉計(jì)算機(jī)后恢復(fù)，從而達(dá)到節(jié)省內(nèi)存的作用。
Octotree 旨在讓 GitHub 體驗(yàn)更好。通常，為了檢查 Github 中的子文件夾，需要手動(dòng)單擊文件夾并導(dǎo)航。Octotree 擴(kuò)展解決了這個(gè)問(wèn)題。此擴(kuò)展在項(xiàng)目的左側(cè)顯示存儲(chǔ)庫(kù)的目錄結(jié)構(gòu)，這有助于更好地理解文件夾結(jié)構(gòu)。
1_EKF88oqIyX6FzgueCKdtXg.gif
File Icons for GitHub and GitLab 可以將 GitHub 和 GitLab 上的原始文件圖標(biāo)替換為特定文件類型的圖標(biāo)。
ax DevTools 是一個(gè)快速、輕量級(jí)但功能強(qiáng)大的測(cè)試工具，由 Deque 開(kāi)發(fā)的世界上最值得信賴的可訪問(wèn)性測(cè)試引擎 axe-core 驅(qū)動(dòng)。使用 ax DevTools 在網(wǎng)站開(kāi)發(fā)過(guò)程中查找并修復(fù)更多可訪問(wèn)性問(wèn)題。
OctoLinker 可以將特定語(yǔ)言的語(yǔ)句（如 include、require 或 import）轉(zhuǎn)換為鏈接。當(dāng)打開(kāi)一個(gè)包含多個(gè)導(dǎo)入語(yǔ)句的文件并且想要快速打開(kāi)它時(shí)，只需將鼠標(biāo)懸停在鏈接的文件上并單擊即可打開(kāi)。
此擴(kuò)展可幫助 Web 開(kāi)發(fā)人員分析網(wǎng)頁(yè)是否違反最佳實(shí)踐。
Check My Links 是一個(gè)鏈接檢查器，它可以抓取網(wǎng)頁(yè)并查找損壞的鏈接。
Checkbot 是用于驗(yàn)證一組HTML頁(yè)面上的鏈接的工具。Checkbot可以檢查一個(gè)或多個(gè)服務(wù)器上的單個(gè)文檔或一組文檔。它會(huì)創(chuàng)建一個(gè)報(bào)告，該報(bào)告匯總了引起某種警告或錯(cuò)誤的所有鏈接。
Google Page Speed Insighs 是一款旨在優(yōu)化所有設(shè)備上的網(wǎng)頁(yè)、提高網(wǎng)頁(yè)加載速度的工具。
META SEO inspector是一款可以幫助用戶分析網(wǎng)頁(yè)的meta信息并得到SEO評(píng)估的谷歌瀏覽器插件。
Ghostery 是強(qiáng)大的隱私保護(hù)擴(kuò)展程序。其主要有以下功能：
AdBlock 用來(lái)在YouTube、Facebook、Twitch和其他你喜愛(ài)的網(wǎng)站上攔截廣告和彈窗。
番茄工作法（Pomodoro?）時(shí)間管理助理。? 長(zhǎng)短兩種休息時(shí)間 ? 帶有倒計(jì)時(shí)顯示的工具欄圖標(biāo) ? 追蹤Pomodoro歷史和統(tǒng)計(jì)訊息 ? 可配置的長(zhǎng)休間隔 ? 可配置的定時(shí)器時(shí)長(zhǎng) ? 桌面與新標(biāo)簽頁(yè)通知 ? 超過(guò)20種音效可選的聲音通知 ? 計(jì)時(shí)器秒針走動(dòng)音效
Loom 可以用來(lái)快速錄制視頻，并且能夠?qū)浿频囊曨l上傳到指定的網(wǎng)頁(yè)中，Loom還支持在用戶點(diǎn)擊啟動(dòng)插件時(shí)，立即捕捉屏幕圖像，同時(shí)開(kāi)始視頻錄制操作，還可以將錄制好的視頻復(fù)制到粘貼板中存儲(chǔ)。
GoFullPage 是一款全屏截圖插件（整個(gè)網(wǎng)頁(yè)截圖），完整捕獲您當(dāng)前頁(yè)面的屏幕，進(jìn)行滾動(dòng)截圖，而無(wú)需任何額外的權(quán)限。單擊擴(kuò)展程序圖標(biāo)，然后將其傳輸?shù)狡聊豢煺盏男聵?biāo)簽頁(yè)中，可以在其中將其下載為圖像或PDF，甚至只需拖動(dòng)即可，保存到桌面。
BetterViewer 可以提供更好的圖像查看體驗(yàn)，旨在替代基于 Chrome 瀏覽器中內(nèi)置的圖像查看模式。使用時(shí)，只需在頁(yè)面右鍵點(diǎn)擊圖片，選擇“在新標(biāo)簽頁(yè)中打開(kāi)圖片”即可。
svg-grabber 是一個(gè)快速預(yù)覽并從網(wǎng)站獲取所有 svg 的工具。可以用來(lái)預(yù)覽、下載和復(fù)制網(wǎng)站中所有 SVG 圖標(biāo)和插圖的代碼。
框架可直上手開(kāi)發(fā)這些功能
如果你沒(méi)有做過(guò)webpack+vue工程化開(kāi)發(fā)項(xiàng)目，可能會(huì)剛開(kāi)始相當(dāng)不適應(yīng)，或者安裝環(huán)境總是出問(wèn)題，但只要你熟悉開(kāi)發(fā)流程后，你會(huì)發(fā)現(xiàn)采用Vue開(kāi)發(fā)比Jquery爽太多了。上手項(xiàng)目需重點(diǎn)了解基礎(chǔ)Vue語(yǔ)法，特別是了解組件、路由及import的使用
VS2017 、.NetCore2.1 、EFCore2.1、JWT、Dapper、Autofac、SqlServer/MySql、Redis(可選，沒(méi)有redis的在appsetting.json中不用配置，默認(rèn)使用內(nèi)置IMemory)、
VsCode、Vue2.0（webpack、node.js,如果沒(méi)有此環(huán)境自行搜索:vue webpack npm)、Vuex、axios、promise、IView、Element-ui
項(xiàng)目地址：https://github.com/cq-panda/Vue.NetCore
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
