牛頓擺是一個(gè)很有趣的現(xiàn)象，出于好奇，我用純CSS代碼實(shí)現(xiàn)了一個(gè)簡單的牛頓擺動(dòng)畫。下面是制作完成后的效果：

感興趣的朋友可以點(diǎn)擊下面的鏈接，觀看完整的視頻教程：

【@keyframes實(shí)現(xiàn)牛頓擺】一個(gè)DIV和純CSS代碼，寫個(gè)簡單的牛頓擺

、Beautiful Soup簡介

爬蟲正則表達(dá)式參考我上一篇文章：Python 爬蟲正則表達(dá)式和re庫

在爬蟲過程中，可以利用正則表達(dá)式去提取信息，但是有些人覺得比較麻煩。因?yàn)榛ù罅繒r(shí)間分析正則表達(dá)式。這時(shí)候可以用高效的網(wǎng)頁解析庫Beautiful Soup。

Beautiful Soup 是一個(gè)HTML/XML 的解析器，主要用于解析和提取 HTML/XML 數(shù)據(jù)。

Beautiful Soup支持Python標(biāo)準(zhǔn)庫中的HTML解析器,還支持一些第三方的解析器，如果我們不安裝它，則 Python 會(huì)使用 Python默認(rèn)的解析器，lxml 解析器更加強(qiáng)大，速度更快，推薦安裝。

下面是各種解析器優(yōu)缺點(diǎn)

二、Beautiful Soup 安裝

Beautiful Soup 3 目前已經(jīng)停止開發(fā)，推薦在現(xiàn)在的項(xiàng)目中使用Beautiful Soup 4，不過它已經(jīng)被移植到BS4了,也就是說導(dǎo)入時(shí)我們需要 import bs4。

安裝Beautiful Soup

pip install beautifulsoup4

根據(jù)操作系統(tǒng)不同,可以選擇下列方法來安裝lxml，安裝解析器：

apt-get install Python-lxml

easy_install lxml

pip install lxml

創(chuàng)建對(duì)象時(shí)，指定解析器，這里為lxml

from bs4 import BeautifulSoup

bs=BeautifulSoup(html,"lxml")

三、Beautiful Soup 使用

Beautiful Soup將復(fù)雜HTML文檔轉(zhuǎn)換成一個(gè)復(fù)雜的樹形結(jié)構(gòu),每個(gè)節(jié)點(diǎn)都是Python對(duì)象,所有對(duì)象可以歸納為4種: Tag , NavigableString , BeautifulSoup , Comment .

（1）Tag

標(biāo)簽，最基本的信息組織單元，分別用<>和標(biāo)明開頭和結(jié)尾，通俗點(diǎn)講就是 HTML 中的一個(gè)個(gè)標(biāo)簽。

Tag有很多方法和屬性，tag中最重要的屬性: name和attributes。

name：

每個(gè)tag都有自己的名字,通過 .name 來獲取:

慣例，同樣以豆瓣電影排行做分析，鏈接為：https://movie.douban.com/top250

import requests
from bs4 import BeautifulSoup

headers={'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko)Chrome/65.0.3325.162 Safari/537.36'}
url='https://movie.douban.com/top250'

req=requests.get(url,headers=headers)

html=req.text
#print(req.text)

soup=BeautifulSoup(html,'lxml')
print(soup.h1)
print(soup.a)

執(zhí)行結(jié)果：

<h1>豆瓣電影 Top 250</h1>  
<a class="nav-login" href="https://accounts.douban.com/passport/login?source=movie" rel="nofollow">登錄/注冊</a>

以上，就直接提取到標(biāo)簽h1和a 的內(nèi)容了，之所以只有一個(gè)，因?yàn)橹惶崛?strong>第一個(gè)匹配到的內(nèi)容。

Attributes：

屬性，一個(gè)tag可能有很多個(gè)屬性， . tag的屬性的操作方法與字典相同。

如上：ol class="grid_view" 的屬性, 標(biāo)簽名為ol，屬性為class，屬性值為：grid_view

import requests
from bs4 import BeautifulSoup

headers={'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko)Chrome/65.0.3325.162 Safari/537.36'}
url='https://movie.douban.com/top250'

req=requests.get(url,headers=headers)

html=req.text
#print(req.text)

soup=BeautifulSoup(html,'lxml')
#獲取標(biāo)簽div所有屬性,得到的是一個(gè)字典
print(soup.div.attrs)
#獲取標(biāo)簽ol屬性為class的值
print(soup.ol['class'])

執(zhí)行結(jié)果：

{'id': 'db-global-nav', 'class': ['global-nav']} 
['grid_view']

因?yàn)槭亲值鋵傩裕詔ag的屬性可以被添加,刪除或修改。不過，對(duì)于修改刪除的操作，不是我們的主要用途，有需要的自行參考官方文檔。

（2）NavigableString

直譯為：可以遍歷的字符串，通過名稱可知，得到字符串。

標(biāo)簽內(nèi)非屬性字符串,格式：soup.\<tag>.string, NavigableString可以跨越多個(gè)層次。

如，得到了標(biāo)簽的內(nèi)容，要想獲取標(biāo)簽內(nèi)部的文字，用 .string 即可。

上面代碼改為：

print(soup.h1.string)

執(zhí)行結(jié)果：

豆瓣電影 Top 250

（3）BeautifulSoup

BeautifulSoup 對(duì)象表示的是一個(gè)文檔的全部內(nèi)容.大部分時(shí)候,可以把它當(dāng)作 Tag 對(duì)象，是一個(gè)特殊的 Tag，我們可以分別獲取它的類型，名稱。

print(soup.name)

執(zhí)行結(jié)果：

[document]

（4）Comment

注釋及特殊字符串，Tag , NavigableString , BeautifulSoup 幾乎覆蓋了html和xml中的所有內(nèi)容,但是還有一些特殊對(duì)象.容易讓人擔(dān)心的內(nèi)容是文檔的注釋部分:

from bs4 import BeautifulSoup

markup="<b><!--Hey, buddy. Want to buy a used parser?--></b>"
soup=BeautifulSoup(markup)
comment=soup.b.string
print(type(comment))
print(comment)

執(zhí)行結(jié)果：

<class 'bs4.element.Comment'>
Hey, buddy. Want to buy a used parser?

四、遍歷文檔樹

HTML基本格式:<>…</>構(gòu)成了所屬關(guān)系，遍歷形成了標(biāo)簽的樹形結(jié)構(gòu)。

所以有時(shí)候不能做到一步就得到想要的元素，需要先選中一個(gè)元素再以它為基準(zhǔn)再選擇它的子節(jié)點(diǎn)，父節(jié)點(diǎn)，兄弟節(jié)點(diǎn)等。

（1）子節(jié)點(diǎn)和子孫節(jié)點(diǎn)

子節(jié)點(diǎn)屬性：.contents .children

.content

tag 的 .content 屬性可以將tag的子節(jié)點(diǎn)以列表的方式輸出

import requests
from bs4 import BeautifulSoup

headers={'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko)Chrome/65.0.3325.162 Safari/537.36'}
url='https://movie.douban.com/top250'

req=requests.get(url,headers=headers)

html=req.text
#print(req.text)

soup=BeautifulSoup(html,'lxml')
print(soup.ol.contents)

執(zhí)行結(jié)果：

['\n', <li>
<div class="item">
<div class="pic">
<em class="">1</em>
<a href="https://movie.douban.com/subject/1292052/">
<img alt="肖申克的救贖" class="" src="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p480747492.jpg" width="100"/>
</a>
</div> 
<div class="info">
...

輸出方式為列表，所以可以用列表索引來獲取它的某一個(gè)元素。

print(soup.ol.contents[1])

.children

返回的不是一個(gè) list，不過我們可以通過遍歷獲取所有子節(jié)點(diǎn)。

print(soup.ol.children)

執(zhí)行結(jié)果：

<list_iterator object at 0x7fbf14fbc4c0>

打印輸出 .children ，可以發(fā)現(xiàn)它是一個(gè) list 生成器對(duì)象，所以需要遍歷一下獲取內(nèi)容。

for child in soup.ol.children:
    print(child)

輸入內(nèi)容和.content差不多。

子孫節(jié)點(diǎn).descendants

如果要獲得所有的子孫節(jié)點(diǎn)的話，可以調(diào)用descendants屬性，返回結(jié)果還是生成器，所以需要遍歷一下輸出可以看見span節(jié)點(diǎn)

print(soup.ol.descendants)
#print(soup.ol.children)
for child in soup.ol.descendants:
    print(child)

descendants會(huì)遞歸查詢所有子節(jié)點(diǎn)，得到所有的子孫節(jié)點(diǎn)。

（2）父節(jié)點(diǎn)和祖父節(jié)點(diǎn)

獲取父節(jié)點(diǎn).parent

print(soup.ol.parent)

獲取所有祖先節(jié)點(diǎn)，同理需要遍歷獲取。

for parent in soup.ol.parents:
    print(parent)

（3）兄弟節(jié)點(diǎn)

獲取兄弟節(jié)點(diǎn)：.next_sibling 和 .previous_sibling

next_sibling和previous_sibling分別獲取節(jié)點(diǎn)的下一個(gè)和上一個(gè)兄弟元素。

print(soup.li.next_sibling)
print(soup.li.previous_sibling)

如果節(jié)點(diǎn)不存在，則返回 None，實(shí)際中通常是字符串或空白，因?yàn)榭瞻谆蛘邠Q行也可以被視作一個(gè)節(jié)點(diǎn)，所以得到的結(jié)果可能是空白或者換行。

全部兄弟節(jié)點(diǎn)：next_siblings 和 previous_siblings

分別返回后面和前面的兄弟節(jié)點(diǎn)，同理，所有節(jié)點(diǎn)需要遍歷獲得。

print(soup.li.next_siblings)
print(soup.li.previous_siblings)

for sibling in soup.li.next_siblings:
    print(sibling)
for previous in soup.li.previous_siblings:
    print(previous)

（4）回退和前進(jìn)節(jié)點(diǎn)

前后節(jié)點(diǎn)：.next_element 和 .previous_element

與 .next_sibling .previous_sibling 不同，它并不是針對(duì)于兄弟節(jié)點(diǎn)，而是在所有節(jié)點(diǎn)，不分層次

比如 head 節(jié)點(diǎn)為

<head><title>The Dormouse's story</title></head>

那么它的下一個(gè)節(jié)點(diǎn)便是 title，它是不分層次關(guān)系的。

所有前后節(jié)點(diǎn)：.next_elements 和 .previous_elements

同理，返回的是迭代器，需要遍歷獲得。

五、搜索文檔樹

eautiful Soup定義了很多搜索方法,主要用的2個(gè)方法:find() 和 find_all()

（1）find_all

語法：find_all(name, attrs, recursive, text, **kwargs)

name:

我們可以根據(jù)節(jié)點(diǎn)名來查詢元素。name可以是：字符串、正則表達(dá)式、列表、True、方法

print(soup.find_all('a'))

因?yàn)槭荰ag類型，我們可以進(jìn)行嵌套查詢.

for a in soup.find_all('a'):
    print(a.find_all('span'))
    print(a.string)

attrs

除了根據(jù)節(jié)點(diǎn)名查詢的話，同樣的也可以通過屬性來查詢。

print(soup.find_all(attrs={'id': 'link1'}))
print(soup.find_all(attrs={'name': 'Dormouse'}))

常用的屬性比如class，我們可以直接傳入class這個(gè)參數(shù)。在這里需要注意的是class是Python的保留字，所以在class的后面加上下劃線。

print(soup.find_all(class_="title"))

執(zhí)行結(jié)果：

<span class="title">肖申克的救贖</span>, <span class="title"> / The Shawshank Redemption</span>, <span class="title">霸王別姬</span>, <span class="title">阿甘正傳</span>

（2）find

除了find_all( )方法，還有find( )方法，前者返回的是多個(gè)元素，以列表形式返回，后綴是返回一個(gè)元素。即第一個(gè)元素。

find( )與find_all( )的使用方法相同。

find_parents() 和find_parent()：前者返回所有祖先節(jié)點(diǎn)，后者返回直接父節(jié)點(diǎn)。

find_next_siblings()和find_next_sibling()：前者返回后面的所有兄弟節(jié)點(diǎn)，后者返回后面第一個(gè)兄弟節(jié)點(diǎn)。

find_previous_siblings和find_previous_sibling()：前者返回前面的所有兄弟節(jié)點(diǎn)，后者返回前面第一個(gè)兄弟節(jié)點(diǎn)。

六、CSS選擇器

Beautiful Soup還提供了另一種選擇器，即CSS選擇器。

soup.select()，返回類型是 list。

同樣可以用 標(biāo)簽名、類名、 id 名、組合、屬性查找。

（1）soup.select()

獲取title標(biāo)簽節(jié)點(diǎn)
print(soup.select('title'))

獲取class為title的節(jié)點(diǎn)
print(soup.select('.title'))

獲取li標(biāo)簽下的a節(jié)點(diǎn)
print(soup.select('li a'))

查找時(shí)還可以加入屬性元素，屬性需要用中括號(hào)括起來，
注意屬性和標(biāo)簽屬于同一節(jié)點(diǎn)，所以中間不能加空格，否則會(huì)無法匹配到
print soup.select('a[href="http://example.com/elsie"]')

（2）嵌套選擇

同樣可以使用嵌套查詢

for ul in soup.select('ul'):
    print(ul.select('li'))

（3）獲取屬性

for ul in soup.select('ul'):
    print(ul['id'])
    print(ul.attrs['id'])

（4）獲取文本

for li in soup.select('li'):
    print('String:', li.string)
    print('get text:', li.get_text())

七、獲取豆瓣電影排行首頁影片信息

通過以上的方法，現(xiàn)在獲取豆瓣電影排行首頁的排名、電影名、導(dǎo)演演員、年份類型。

從頁面分析，所有影片信息，在class標(biāo)簽值為grid_view的里面。

所以第一步獲取所有g(shù)rid_view里面所有l(wèi)i標(biāo)簽的值，返回的是一個(gè)列表。

list=soup.find(class_='grid_view').find_all('li')

排序，在列表每個(gè)元素中，獲取em標(biāo)簽值，為排序，只取字符串。

find('em').string

電影名稱，獲取第一個(gè)title值

find(class_='title').string

導(dǎo)演和年代信息，在標(biāo)簽p當(dāng)中，獲取的是text文本格式。由于中間有空格，還有br換行符，所以最后還需要replace替換掉。

item.find('p').text.replace(' ','')

最終代碼為：

url='https://movie.douban.com/top250'

req=requests.get(url,headers=headers)

html=req.text
#print(req.text)
soup=BeautifulSoup(html,'lxml')

list=soup.find(class_='grid_view').find_all('li')

for item in list:
    item_num=item.find('em').string
    item_name=item.find(class_='title').string
    item_act=item.find('p').text.replace(' ','')
    print("排名："+item_num,"\n電影名稱："+item_name,item_act)

執(zhí)行結(jié)果：

排名：1 
電影名稱：肖申克的救贖 
導(dǎo)演:弗蘭克·德拉邦特FrankDarabont   主演:蒂姆·羅賓斯TimRobbins/...
1994 / 美國 / 犯罪劇情

排名：2 
電影名稱：霸王別姬 
導(dǎo)演:陳凱歌KaigeChen   主演:張國榮LeslieCheung/張豐毅FengyiZha...
1993 / 中國大陸中國香港 / 劇情愛情同性

排名：3 
電影名稱：阿甘正傳 
導(dǎo)演:羅伯特·澤米吉斯RobertZemeckis   主演:湯姆·漢克斯TomHanks/...
1994 / 美國 / 劇情愛情

排名：4 
電影名稱：泰坦尼克號(hào) 
導(dǎo)演:詹姆斯·卡梅隆JamesCameron   主演:萊昂納多·迪卡普里奧Leonardo...
1997 / 美國墨西哥澳大利亞加拿大 / 劇情愛情災(zāi)難

排名：5 
電影名稱：這個(gè)殺手不太冷 
導(dǎo)演:呂克·貝松LucBesson   主演:讓·雷諾JeanReno/娜塔莉·波特曼...
1994 / 法國美國 / 劇情動(dòng)作犯罪

排名：6 
電影名稱：美麗人生 
導(dǎo)演:羅伯托·貝尼尼RobertoBenigni   主演:羅伯托·貝尼尼RobertoBeni...
1997 / 意大利 / 劇情喜劇愛情戰(zhàn)爭

排名：7 
電影名稱：千與千尋 
導(dǎo)演:宮崎駿HayaoMiyazaki   主演:柊瑠美RumiH?ragi/入野自由Miy...
2001 / 日本 / 劇情動(dòng)畫奇幻

排名：8 
電影名稱：辛德勒的名單 
導(dǎo)演:史蒂文·斯皮爾伯格StevenSpielberg   主演:連姆·尼森LiamNeeson...
1993 / 美國 / 劇情歷史戰(zhàn)爭

排名：9 
電影名稱：盜夢空間 
導(dǎo)演:克里斯托弗·諾蘭ChristopherNolan   主演:萊昂納多·迪卡普里奧Le...
2010 / 美國英國 / 劇情科幻懸疑冒險(xiǎn)

排名：10 
電影名稱：星際穿越 
導(dǎo)演:克里斯托弗·諾蘭ChristopherNolan   主演:馬修·麥康納MatthewMc...
2014 / 美國英國加拿大 / 劇情科幻冒險(xiǎn)

排名：11 
電影名稱：忠犬八公的故事 
導(dǎo)演:萊塞·霍爾斯道姆LasseHallstr?m   主演:理查·基爾RichardGer...
2009 / 美國英國 / 劇情

排名：12 
電影名稱：楚門的世界 
導(dǎo)演:彼得·威爾PeterWeir   主演:金·凱瑞JimCarrey/勞拉·琳妮Lau...
1998 / 美國 / 劇情科幻

排名：13 
電影名稱：海上鋼琴師 
導(dǎo)演:朱塞佩·托納多雷GiuseppeTornatore   主演:蒂姆·羅斯TimRoth/...
1998 / 意大利 / 劇情音樂

排名：14 
電影名稱：三傻大鬧寶萊塢 
導(dǎo)演:拉庫馬·希拉尼RajkumarHirani   主演:阿米爾·汗AamirKhan/卡...
2009 / 印度 / 劇情喜劇愛情歌舞

排名：15 
電影名稱：機(jī)器人總動(dòng)員 
導(dǎo)演:安德魯·斯坦頓AndrewStanton   主演:本·貝爾特BenBurtt/艾麗...
2008 / 美國 / 科幻動(dòng)畫冒險(xiǎn)

排名：16 
電影名稱：放牛班的春天 
導(dǎo)演:克里斯托夫·巴拉蒂ChristopheBarratier   主演:讓-巴蒂斯特·莫尼...
2004 / 法國瑞士德國 / 劇情喜劇音樂

排名：17 
電影名稱：無間道 
導(dǎo)演:劉偉強(qiáng)/麥兆輝   主演:劉德華/梁朝偉/黃秋生
2002 / 中國香港 / 劇情犯罪驚悚

排名：18 
電影名稱：瘋狂動(dòng)物城 
導(dǎo)演:拜倫·霍華德ByronHoward/瑞奇·摩爾RichMoore   主演:金妮弗·...
2016 / 美國 / 喜劇動(dòng)畫冒險(xiǎn)

排名：19 
電影名稱：大話西游之大圣娶親 
導(dǎo)演:劉鎮(zhèn)偉JeffreyLau   主演:周星馳StephenChow/吳孟達(dá)ManTatNg...
1995 / 中國香港中國大陸 / 喜劇愛情奇幻古裝

排名：20 
電影名稱：熔爐 
導(dǎo)演:黃東赫Dong-hyukHwang   主演:孔侑YooGong/鄭有美Yu-miJung/...
2011 / 韓國 / 劇情

排名：21 
電影名稱：控方證人 
導(dǎo)演:比利·懷爾德BillyWilder   主演:泰隆·鮑華TyronePower/瑪琳·...
1957 / 美國 / 劇情犯罪懸疑

排名：22 
電影名稱：教父 
導(dǎo)演:弗朗西斯·福特·科波拉FrancisFordCoppola   主演:馬龍·白蘭度M...
1972 / 美國 / 劇情犯罪

排名：23 
電影名稱：當(dāng)幸福來敲門 
導(dǎo)演:加布里爾·穆奇諾GabrieleMuccino   主演:威爾·史密斯WillSmith...
2006 / 美國 / 劇情傳記家庭

排名：24 
電影名稱：觸不可及 
導(dǎo)演:奧利維·那卡什OlivierNakache/艾力克·托蘭達(dá)EricToledano   主...
2011 / 法國 / 劇情喜劇

排名：25 
電影名稱：怦然心動(dòng) 
導(dǎo)演:羅伯·萊納RobReiner   主演:瑪?shù)铝铡た_爾MadelineCarroll/卡...
2010 / 美國 / 劇情喜劇愛情

八、小結(jié)

推薦使用lxml解析庫，必要時(shí)選擇html.parser。相對(duì)于正則表達(dá)式，Beautiful Soup更加簡單，但是網(wǎng)上有些推薦正則表達(dá)式，理由是精確。

具體用哪個(gè)，還是根據(jù)環(huán)境選擇吧，一起使用都可以。

言

近日，很多大佬們都在推薦這款遠(yuǎn)程Web調(diào)試工具-PageSpy。這個(gè)項(xiàng)目的使用場景特別適合用于某些項(xiàng)目外包，當(dāng)用戶部署或使用出現(xiàn)異常問題時(shí)都可以考慮使用這款工具。

它可以像使用瀏覽器開發(fā)者助手一樣，去查看遠(yuǎn)程網(wǎng)頁控制臺(tái)、網(wǎng)絡(luò)請(qǐng)求、頁面內(nèi)容、緩存等信息，也可以直接下發(fā)JS指令，對(duì)網(wǎng)頁進(jìn)行控制。能夠幫助我們實(shí)時(shí)查看用戶側(cè)的網(wǎng)頁狀態(tài)。

PageSpy 項(xiàng)目介紹

PageSpy 是一款用來調(diào)試遠(yuǎn)程 Web 項(xiàng)目的工具。

基于對(duì)原生 API 的封裝，它將調(diào)用原生方法時(shí)的參數(shù)進(jìn)行過濾、轉(zhuǎn)化，整理成格式規(guī)范的消息供調(diào)試端消費(fèi)；調(diào)試端收到消息數(shù)據(jù)，提供類控制臺(tái)可交互式的功能界面將數(shù)據(jù)呈現(xiàn)出來。

功能展示

Console 面板

顯示 console.<log | info | warn | error> 日志信息，可以執(zhí)行代碼

Network 面板

顯示 fetch | XMLHttpRequest | navigator.sendBeacon 的網(wǎng)絡(luò)請(qǐng)求

Page 面板

顯示當(dāng)前頁面，查看 HTML 節(jié)點(diǎn)樹

Storage 面板

查看 localStorage | sessionStorage | cookie 緩存數(shù)據(jù)

Systems 面板

顯示 userAgent 信息，查看 API 兼容性

使用場景

任何無法在本地使用控制臺(tái)調(diào)試的場景，都是 PageSpy 可以大顯身手的時(shí)候！

• 本地調(diào)試 H5、Webview 應(yīng)用：以往有些產(chǎn)品提供了可以在 H5 上查看信息的面板，但移動(dòng)端屏幕太小操作不便、顯示不友好，以及信息被截?cái)嗟葐栴}；
• 遠(yuǎn)程辦公、跨地區(qū)協(xié)同：傳統(tǒng)溝通方式如郵件、電話、視頻會(huì)議等，溝通效率不高、故障信息不全面，容易誤解誤判；
• 用戶終端上出現(xiàn)白屏問題：傳統(tǒng)定位問題的方式包括數(shù)據(jù)監(jiān)控、日志分析等，這些方式依賴排障人員要理解業(yè)務(wù)需求場景、技術(shù)實(shí)現(xiàn)；

此類問題的共同點(diǎn)是開發(fā)者無法像使用控制臺(tái)一樣查看運(yùn)行信息。

對(duì)此 PageSpy 提供項(xiàng)目運(yùn)行現(xiàn)場供技術(shù)人員在調(diào)試端查看，在遠(yuǎn)程協(xié)同場景中，測試人員不用再頻繁的通過文字、截圖、語音、錄屏等方式向技術(shù)人員提供故障信息。

使用方式

方式1：使用 Docker 部署

執(zhí)行下面的docker命令，即可安裝、部署、啟動(dòng)服務(wù)（前提：執(zhí)行機(jī)器需安裝docker容器）

$ docker run -d --restart=always -p 6752:6752 --name="pageSpy" ghcr.io/huolalatech/page-spy-web:release

啟動(dòng)完成后瀏覽器訪問 http://localhost:6752，頁面頂部會(huì)出現(xiàn) 接入 SDK 菜單，點(diǎn)擊菜單查看如何在業(yè)務(wù)項(xiàng)目中配置并集成。

方式2：使用 Node 部署

執(zhí)行下面node命令（需先安裝nodejs工具）

$ yarn global add @huolala-tech/page-spy-api

// 如果你使用 npm

$ npm install -g @huolala-tech/page-spy-api

安裝完成之后你可以在命令行中直接執(zhí)行 page-spy-api 啟動(dòng)服務(wù)。部署完成后瀏覽器訪問 http://localhost:6752，頁面頂部會(huì)出現(xiàn) 接入 SDK 菜單，點(diǎn)擊菜單查看如何在業(yè)務(wù)項(xiàng)目中配置并集成。