Pandorym
Pandorym

【譯】chrome-remote-interface

本文翻譯自：chrome-remote-interface
原文更新時間：July 21,2017
譯者：Pandorym

Chrome 調試協議 的接口，他提供一個使用 JavaScript API 的簡單的命令和通知抽象，幫助使用 Chrome（或任何其他合適的實現）。

這個模塊是眾多 第三方協議客戶端 之一。

簡單的 API 用法

下列片段加載https://github.com，并轉儲每個請求：

const CDP = require('chrome-remote-interface');

CDP((client) => {
    // extract domains
    const {Network, Page} = client;
    // setup handlers
    Network.requestWillBeSent((params) => {
        console.log(params.request.url);
    });
    Page.loadEventFired(() => {
        client.close();
    });
    // enable events then start!
    Promise.all([
        Network.enable(),
        Page.enable()
    ]).then(() => {
        return Page.navigate({url: 'https://github.com'});
    }).catch((err) => {
        console.error(err);
        client.close();
    });
}).on('error', (err) => {
    // cannot connect to the remote endpoint
    console.error(err);
});

在 維基 中尋找更多的例子，特別注意，上面的例子可以改寫成 async / await 原型。

你可能還想查看 FAQ。

安裝

npm install chrome-remote-interface

全局安裝（-g）可以使用附隨的客戶端。

實現

這個模塊應該和每個實現了 Chrome 調試協議 的應用程序一起工作。特別是，它已經對以下實現進行了測試：

Implementation Protocol version Protocol List New Activate Close Version
Google Chrome tip-of-tree yes yes yes yes yes yes
Microsoft Edge partial yes yes no no no yes
Node.js (v6.3.0+) node yes no no no no yes
Safari (iOS) partial no yes no no no no

目標（target）的含義根據實現而差異，例如，每個 Chrome 標籤代表一個目標，而對於 Node.js 一個目標是當前視察的腳本。

設置

為了使用這個模塊，Chrome 自身或其他實現的實例 需要運行在一個已知端口（默認為localhost:9222）。

Choreme/Chromium

Desktop

啟動 Chrome 時，使用--remote-debugging-port選項，例如：

google-chrome --remote-debugging-port=9222

Headless

在 59 之後的版本，額外使用--headless選項，例如：

google-chrome --headless --remote-debugging-port=9222

Android

插入設備，并啟動 端口轉發， 例如：

adb forward tcp:9222 localabstract:chrome_devtools_remote

WebView

為了視察，WebView 必需 已配置調試，並且對應的進程 ID 必需是已知的。有幾種方法可以獲得它，例如：

adb shell grep -a webview_devtools_remote /proc/net/unix

最後，可以使用如下方式啟動端口轉發：

adb forward tcp:9222 localabstract:webview_devtools_remote_

Edge

安裝并運行 Edge 診斷配適器（Diagnostics Adapter）。

Node.js

啟動 Node.js 使附加--inspect選項，例如：

node --inspect=9222 script.js

Safari (iOS)

安裝并運行 iOS WebKit 調試代理（Debug Proxy）。

附隨的客戶端

這個模塊有一個附隨的客戶端應用程序，他可用於交互式的控制遠程實例。

目標管理

該附隨的客戶端提供用於與 HTTP 前端交互的子命令（例如，List、New 等）,運行--help以顯示一個可用選項的列表。

下面是一些例子：

$ chrome-remote-interface new 'http://example.com'
{
    "description": "",
    "devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9222/devtools/page/b049bb56-de7d-424c-a331-6ae44cf7ae01",
    "id": "b049bb56-de7d-424c-a331-6ae44cf7ae01",
    "thumbnailUrl": "/thumb/b049bb56-de7d-424c-a331-6ae44cf7ae01",
    "title": "",
    "type": "page",
    "url": "http://example.com/",
    "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/b049bb56-de7d-424c-a331-6ae44cf7ae01"
}
$ chrome-remote-interface close 'b049bb56-de7d-424c-a331-6ae44cf7ae01'

查閱

使用子命令inspect可以以 REPL 方式進行 命令執行 和 事件綁定。不像常規的 API，該回調被重寫了，以方便顯示命令的返回值和事件的信息。還有，這里的事件綁定是簡化的，執行一個速寫方法（例如Page.loadEventFired()）切換事件註冊。

記住，該 REPL 接口提供了實現。

這是一個簡單的片段：

$ chrome-remote-interface inspect
>>> Runtime.evaluate({expression: 'window.location.toString()'})
{ result:
   { result:
      { type: 'string',
        value: 'https://www.google.it/_/chrome/newtab?espv=2&ie=UTF-8' },
     wasThrown: false } }
>>> Page.enable()
{ result: {} }
>>> Page.loadEventFired() // registered
{ 'Page.loadEventFired': true }
>>> Page.loadEventFired() // unregistered
{ 'Page.loadEventFired': false }
>>> Page.loadEventFired() // registered
{ 'Page.loadEventFired': true }
>>> Page.navigate({url: 'https://github.com'})
{ result: { frameId: '28677.1' } }
{ 'Page.loadEventFired': { timestamp: 21385.383076 } }
>>> Runtime.evaluate({expression: 'window.location.toString()'})
{ result:
   { result: { type: 'string', value: 'https://github.com/' },
     wasThrown: false } }

事件過濾

為了減少來自事件監聽器的數據顯示量，可以提供一個過濾函數。在這個例子中，只顯示資源的 URL：

$ chrome-remote-interface inspect
>>> Network.enable()
{ result: {} }
>>> Network.requestWillBeSent(params => params.request.url)
{ 'Network.requestWillBeSent': 'params => params.request.url' }
>>> Page.navigate({url: 'https://www.wikipedia.org'})
{ 'Network.requestWillBeSent': 'https://www.wikipedia.org/' }
{ result: { frameId: '5530.1' } }
{ 'Network.requestWillBeSent': 'https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia_wordmark.png' }
{ 'Network.requestWillBeSent': 'https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png' }
{ 'Network.requestWillBeSent': 'https://www.wikipedia.org/portal/wikipedia.org/assets/js/index-3b68787aa6.js' }
{ 'Network.requestWillBeSent': 'https://www.wikipedia.org/portal/wikipedia.org/assets/js/gt-ie9-c84bf66d33.js' }
{ 'Network.requestWillBeSent': 'https://www.wikipedia.org/portal/wikipedia.org/assets/img/sprite-bookshelf_icons.png?16ed124e8ca7c5ce9d463e8f99b2064427366360' }
{ 'Network.requestWillBeSent': 'https://www.wikipedia.org/portal/wikipedia.org/assets/img/sprite-project-logos.png?9afc01c5efe0a8fb6512c776955e2ad3eb48fbca' }

內置文檔

在 REPL和常規 API 中的每個協議對象都擁有在元信息中找到的描述符。此外，還添加了一個category字段，譯確定成員是command、event或type。

例如，學習如何調用Page.navigate：

>>> Page.navigate
{ [Function]
  category: 'command',
  parameters: { url: { type: 'string', description: 'URL to navigate the page to.' } },
  returns:
   [ { name: 'frameId',
       '$ref': 'FrameId',
       hidden: true,
       description: 'Frame id that will be navigated.' } ],
  description: 'Navigates current page to the given URL.',
  handlers: [ 'browser', 'renderer' ] }

學習來自Network.requestWillBeSent事件的參數：

>>> Network.requestWillBeSent
{ [Function]
  category: 'event',
  description: 'Fired when page is about to send HTTP request.',
  parameters:
   { requestId: { '$ref': 'RequestId', description: 'Request identifier.' },
     frameId:
      { '$ref': 'Page.FrameId',
        description: 'Frame identifier.',
        hidden: true },
     loaderId: { '$ref': 'LoaderId', description: 'Loader identifier.' },
     documentURL:
      { type: 'string',
        description: 'URL of the document this request is loaded for.' },
     request: { '$ref': 'Request', description: 'Request data.' },
     timestamp: { '$ref': 'Timestamp', description: 'Timestamp.' },
     wallTime:
      { '$ref': 'Timestamp',
        hidden: true,
        description: 'UTC Timestamp.' },
     initiator: { '$ref': 'Initiator', description: 'Request initiator.' },
     redirectResponse:
      { optional: true,
        '$ref': 'Response',
        description: 'Redirect response data.' },
     type:
      { '$ref': 'Page.ResourceType',
        optional: true,
        hidden: true,
        description: 'Type of this resource.' } } }

視察Network.Request類型（注意，不同於命令和時間，類型使用大駝峰拼寫法）：

>>> Network.Request
{ category: 'type',
  id: 'Request',
  type: 'object',
  description: 'HTTP request data.',
  properties:
   { url: { type: 'string', description: 'Request URL.' },
     method: { type: 'string', description: 'HTTP request method.' },
     headers: { '$ref': 'Headers', description: 'HTTP request headers.' },
     postData:
      { type: 'string',
        optional: true,
        description: 'HTTP POST request data.' },
     mixedContentType:
      { optional: true,
        type: 'string',
        enum: [Object],
        description: 'The mixed content status of the request, as defined in http://www.w3.org/TR/mixed-content/' },
     initialPriority:
      { '$ref': 'ResourcePriority',
        description: 'Priority of the resource request at the time request is sent.' } } }

Chrome 調試協議版本

chrome-remote-interface默認使用本地版本的協議描述符。不停的更新這個文件，使用scripts/update-protocol.sh並且推送到這個倉庫。

這種行為可以改變在 connection 的remote選項為true，在這種情況，遠程實例要求自己提供協議描述符。

Chrome < 60.0.3097.0 不支持這麼做，所以當這種情況，將從源倉庫獲取協議描述符。

有三個選項可以覆蓋上述行為：

  • 使用特定的協議描述符 connection (protocol 選項)；

  • 用原始版本的命令和事件接口來使用前沿特性，這不會出現在 本地版本 的協議描述符；

  • 更新scripts/update-protocol.sh的本地副本（當使用npm install獲取時不存在）。

瀏覽器用法

這個模塊可以運行在 Web 上下文，但有明顯的局限性，即外部 HTTP請求（List,New 等）不能直接執行，因此為了使用它 用戶必須提供一個全局 criRequest：

function criRequest(options, callback) {}

options與在 Node.js http模塊中的寫法一樣，並且callback是一個接受兩個參數的函數：err（JavaScript Error對象，或null）和data（字符串返回值）。

使用 webpack

只需要使用這個模塊，他就會工作：

const CDP = require('chrome-remote-interface');

使用 non-minified 版本手動運行 webpack ：

DEBUG=true npm run webpack

使用 Vanilla JavaScript

生成一個 JavaScript 文件，這可以使用

API

該 API 由三部分組成：

  • DevTools 方法（對於那些 實現 的支持，例如，List、New 等）；

  • 建立連接；

  • 該實際上的協議接口；

CDP([options], [callback])

使用 Chrome 調試協議 連接一個遠程實例。
options是一個對象，并有下列可選屬性：

  • host：HTTP 前端主機。默認為localhost；

  • port：HTTP 前端端口。默認為9222；

  • secure：HTTPS/WSS 前端。默認為false；

  • target：確定這個客戶端應該連接到哪個目標。行為根據類型的變化而變化：

    • 一個function，該函數以List方法返回的數組作為參數，并返回一個目標、或目標在數組中的數值索引；

    • 一個目標object，如New或List方法的返回值；

    • 一個string，他表示原始 WebSocket URL，在這種情況，host和port不用於獲取目標列表，但是他們將用於使相對 URL 變得完整。

    • 一個string，他表示目標 id。

    默認是一個實現了返回第一個可用目標的函數。（注意，最多可在同一目標上建立一個連接）；

  • protocol：Chrome 調試協議 描述符對象。默認使用根據遠程選項選擇的協議；

  • remote：一個布爾值，指示協議是否必須遠程獲取，或者必須使用本地版本。如果設置了protocol選項，這個選擇不會生效。默認值為false。

這些選項在該CDP類實例的所有操作都是有效屬性。除此之外， webSocketURL字段包含當前使用的 WebSocket URL。

callback是一個監聽器，將自動添加到返回EventEmitter的connect事件。當callback缺省時，將返回一個Promise對象，如果觸發connect事件即為成功（fulfilled），如果觸發error事件即為失敗（rejected）。

該EventEmitter支持下列事件：

Event: 'connetn'

function (client) {}

當到 WebSocket 的連接已建立時觸發。

client是一個CDP類的實例。

Event: 'error'

function (err) {}

當不能訪問http://host:port/json，或不能連接到 WebSocket 時觸發。

err是一個Error的實例。

CDP.Protocol([options], [callback])

取得該 Chrome 調試協議 描述符。

options是一個對象，并有下列可選屬性：

  • host：HTTP 前端主機。默認為localhost；

  • port：HTTP 前端端口。默認為9222；

  • secure：HTTPS/WSS 前端。默認為false；

  • remote：一個布爾值，指示協議是否必須遠程獲取，或者必須使用本地版本。如果不能完成請求，則使用本地版本。默認值為false。

callback在取得協議后執行，他將獲得下列參數：

  • err：一個Error對象，指明成功狀態；

  • protocol：一個對象，擁有下列屬性：

    • remote：一個布爾值，指明返回的描述符是否是遠程版本（取決于用戶選擇或錯誤）；

    • descriptor：該 Chrome 調試協議 描述符。

當callback缺省時，將返回一個Promise對象。

For example:

const CDP = require('chrome-remote-interface');
CDP.Protocol(function (err, protocol) {
    if (!err) {
        console.log(JSON.stringify(protocol.descriptor, null, 4));
    }
});

CDP.List([options], [callback])

請求遠程實例的打開的可用目標 / 標籤的列表。

options是一個對象，并有下列可選屬性：

  • host：HTTP 前端主機。默認為localhost；

  • port：HTTP 前端端口。默認為9222；

  • secure：HTTPS/WSS 前端。默認為false；

callback在正確取得列表后執行，他將獲得下列參數：

  • err：一個Error對象，指明成功狀態；

  • targets：該數組返回`http://host:port/json/list中包含的目標列表。

當callback缺省時，將返回一個Promise對象。

For example:

const CDP = require('chrome-remote-interface');
CDP.List(function (err, targets) {
    if (!err) {
        console.log(targets);
    }
});

CDP.New([options], [callback])

在遠程實例中創建一個新的目標 / 標籤。

options是一個對象，并有下列可選屬性：

  • host：HTTP 前端主機。默認為localhost；

  • port：HTTP 前端端口。默認為9222；

  • secure：HTTPS/WSS 前端。默認為false；

  • url：URL 用於載入新目標 / 標籤。默認為about:blank。

callback在創建目標后執行，他將獲得下列參數：

  • err：一個Error對象，指明成功狀態；

  • targets：該對象，來自http://host:port/json/new中包含的目標。

當callback缺省時，將返回一個Promise對象。

For example:

const CDP = require('chrome-remote-interface');
CDP.New(function (err, target) {
    if (!err) {
        console.log(target);
    }
});

CDP.Activate([options], [callback])

在遠程實例中激活一個目標 / 標籤。

options是一個對象，并有下列可選屬性：

  • host：HTTP 前端主機。默認為localhost；

  • port：HTTP 前端端口。默認為9222；

  • secure：HTTPS/WSS 前端。默認為false；

  • id：目標 id。必填，無默認值。

callback在激活請求收到響應后執行，他將獲得下列參數：

  • err：一個Error對象，指明成功狀態；

當callback缺省時，將返回一個Promise對象。

For example:

const CDP = require('chrome-remote-interface');
CDP.Activate({'id': 'CC46FBFA-3BDA-493B-B2E4-2BE6EB0D97EC'}, function (err) {
    if (!err) {
        console.log('target is activated');
    }
});

CDP.Close([options], [callback])

關閉一個在遠程實例中打開的目標 / 標籤。

options是一個對象，并有下列可選屬性：

  • host：HTTP 前端主機。默認為localhost；

  • port：HTTP 前端端口。默認為9222；

  • secure：HTTPS/WSS 前端。默認為false；

  • id：目標 id。必填，無默認值。

callback在關閉請求收到響應后執行，他將獲得下列參數：

  • err：一個Error對象，指明成功狀態；

當callback缺省時，將返回一個Promise對象。

For example:

const CDP = require('chrome-remote-interface');
CDP.Close({'id': 'CC46FBFA-3BDA-493B-B2E4-2BE6EB0D97EC'}, function (err) {
    if (!err) {
        console.log('target is closing');
    }
});

注意，當目標排隊等待刪除時，該回調將被觸發，但真正的刪除將異步執行。

CDP.Version([options], [callback])

從遠程實例請求版本信息。

options是一個對象，并有下列可選屬性：

  • host：HTTP 前端主機。默認為localhost；

  • port：HTTP 前端端口。默認為9222；

  • secure：HTTPS/WSS 前端。默認為false；

callback在正確獲得版本信息后執行，他將獲得下列參數：

  • err：一個Error對象，指明成功狀態；

  • info：一個 JSON 對象，來自http://host:port/json/version包含的版本信息。

當callback缺省時，將返回一個Promise對象。

For example:

const CDP = require('chrome-remote-interface');
CDP.Version(function (err, info) {
    if (!err) {
        console.log(info);
    }
});

Class: CDP

Event: 'event'

function (message) {}

當遠程實例通過 WebSocket 發送任何通知時觸發。

message是接收的對象，他有下列屬性：

  • method：一個字符串，描述該通知（例如）'Network.requestWillBeSent'）；

  • params：一個對象，包含有效載荷（payload）。

參考 Chrome 調試協議 規格獲取更多信息。

For example:

client.on('event', function (message) {
    if (message.method === 'Network.requestWillBeSent') {
        console.log(message.params);
    }
});

Event: '.'

function (params) {}

當遠程實例通過 WebSocket 發送關於.的通知時觸發。

params：一個對象，包含有效載荷（payload）。

這是一個實用的時間，他可以很容易的偵聽特定的時間（看 'event'），for example:

client.on('Network.requestWillBeSent', console.log);

Event: 'ready'

function () {}

每次不存在 等待遠程實例響應的命令 時觸發。交互是異步的，序列化命令隊列的唯一方式是使用 send 方法提供的回調。這個時間起到一個屏障作用，並且在某些簡單情況下，可以避免回調地獄。

鼓勵使用者廣泛的檢查每個方法的響應，並且在處理複雜的異步程序流是應該更喜歡 promises API。

例如，僅在啟用了Network和Page域的通知后才加載 URL：

client.Network.enable();
client.Page.enable();
client.once('ready', function () {
    client.Page.navigate({'url': 'https://github.com'});
});

在這個特殊的情況下，不強制序列化執行可能導致遠程實例不能正確的交付通知該客戶端。

Event: 'disconnect'

function () {}

當實例關閉該 WebSocket 連接時觸發。

這可能發生在當用戶打開 DevTools 或關閉標籤。

client.send(method, [params], [callback])

向遠程實例發出一個命令。

method 是一個描述命令的字符串。

params 是一個對象，包含有效載荷。

callback 是在收到遠程實例關於這個命令的響應時執行，他將獲得下列參數：

  • error：一個布爾值，指明成功狀態，來自遠程實例；

  • response：一個對象，包含響應（result 字段，如果error === false）或者錯誤知識（error字段，如果`error === true）。

當callback缺省時，將返回一個Promise對象，並且 fulfilled/rejected 狀態取決于error屬性。

在低等級 WebSocket 錯誤的情況下，該error包含產生的Error對象，並且沒有response返回。

注意，他的字段id在 Chrome 調試協議 中提到是內部管理的，並且不向用戶揭露。

For example:

client.send('Page.navigate', {'url': 'https://github.com'}, console.log);

client..([params], [callback])

就是一個速寫：

client.send('.', params, callback);

For example:

client.Page.navigate({'url': 'https://github.com'}, console.log);

client..([callback])

就是一個速寫：

client.on('.', callback);

唯一的區別是，當callback省卻時，事件只註冊一次，并返回一個Promise對象。

For example:

client.Network.requestWillBeSent(console.log);

client.close([callback])

關閉到遠程實例的連接。

callback當該 WebSocket 成功關閉時執行。

當callback缺省時，將返回一個Promise對象。

FAQ

調用Domain.method，我獲得提示Domain.method is not a function

這意味著你正在使用的協議描述符中不包含Domain.method。如果你確信你的 Chrome 實例支持這種方法，你可以直接調用它：

client.send('Domain.method', ...);

或者詢問 Chrome 正確的協議描述符是什麼：

CDP({remote: true});

看 這裡，獲得更多信息。

調用Domain.method，我獲得提示Domain.method wasn't found

這意味著你正在使用的協議描述符包含一個不受 Chrome 實例支持的方法。最有可能的原因是，你正在嘗試使用一個最前沿的功能，試試升級到新的 Chrome 版本吧。

看 這裡，獲得更多信息。

檢查正確的協議描述符：

$ chrome-remote-interface inspect --remote

Headless Chrome 問題？

記住，--headless Chrome 是相對較新的，他的操作指南（in Chrome）還在制定中。如果你認為遇到了一個 Bug，那麼就看看這些開放性 issues，尤其是 外部 issues。

為什麼當我在 Docker 容器中運行 Chrome 時，我的程序會停滯或表現得出乎意料呢？

這是因為在 Docker 的默認設置中，/dev/shm的大小被設置為 64MB，這可能不足以讓 Chrome 跳轉到某些網頁。

你可以改變這個值，在運行你的容器時附帶說，--shm-size=256m。

投稿者

  • Andrey Sidorov

  • Greg Cochard

資源

  • Chrome Debugging Protocol

  • Chrome Debugging Protocol Google group

  • devtools-protocol official repo

  • Showcase Chrome Debugging Protocol Clients

  • Awesome chrome-devtools

你可能感兴趣的:(node.js,javascript,chrome-devtools)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • vue 创建项目报错：command failed: npm install --loglevel error 那鱼、会飞 vue.jsvue-cli3
    这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/[email protected]@vue/[email protected]（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错
  • 更改npm镜像源为淘宝镜像 骆小骆 基于node.js
    npm常用指令后缀*最近复习了一下node.js整理了一下跟node.js相关的指令后缀*--save、-S参数意思是把模块的版本信息保存到dependencies（生产环境依赖）中，即你的package.json文件的dependencies字段中；–--save-dev、-D参数意思是把模块版本信息保存到devDependencies（开发环境依赖）中，即你的package.json文件的de
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言
    前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
  • webstorm报错TypeError: this.cliEngine is not a constructor Blue_Color
    点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • 了解 UNPKG：前端开发者的包管理利器 小于负无穷 前端javascripttypescriptcsshtml5node.js
    在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
  • 分享一个基于python的电子书数据采集与可视化分析 hadoop电子书数据分析与推荐系统 spark大数据毕设项目（源码、调试、LW、开题、PPT) 计算机源码社 Python项目大数据大数据pythonhadoop计算机毕业设计选题计算机毕业设计源码数据分析spark毕设
    作者：计算机源码社个人简介：本人八年开发经验，擅长Java、Python、PHP、.NET、Node.js、Android、微信小程序、爬虫、大数据、机器学习等，大家有这一块的问题可以一起交流！学习资料、程序开发、技术解答、文档报告如需要源码，可以扫取文章下方二维码联系咨询Java项目微信小程序项目Android项目Python项目PHP项目ASP.NET项目Node.js项目选题推荐项目实战|p
  • axios 请求封装 web Rookie 工作前端javascriptajax
    文章目录1.前言2.axios下载3.代码实现4.实际使用1.前言本文是对于axios的二次封装处理，axios是一个基于Promise的网络请求库，作用于node.js和浏览器中；本文对于axios中的封装着重于直接使用，如果想要学习axios相关知识可以先行离开，后续在对其进行完善2.axios下载npminstallaxios3.代码实现//request.tsimportaxios,{Ax
  • 2019-05-29 vue-router的两种模式的区别 Kason晨
    1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash
  • 为什么Node.js不适合CPU密集型应用？ weixin_54503231 node.js
    Node.js不适合CPU密集型应用的原因主要基于其设计理念和核心特性，具体可以归纳为以下几点：单线程模型Node.js采用单线程模型来处理用户请求和异步I/O操作。虽然这种模型在处理高并发I/O密集型任务时非常高效，因为它避免了传统多线程模型中的线程上下文切换开销，但这也意味着它不能充分利用现代多核CPU的计算能力。对于需要大量计算资源的CPU密集型应用，单线程模型会成为瓶颈，导致应用性能受限。
  • 计算机毕设Node.js+Vue校园易购二手交易平台（程序+LW+部署） Node程序源码强子 vue.js课程设计node.js
    项目运行环境配置：Node.js最新版+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue。项目技术：Express框架+Node.js+Vue等等组成，B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境：最好是Nodejs最新版，我们在这个版本上开发的。其他版本理论上也可以。2.开发
  • electron多标签页模式更像客户端 diygwcom electronjavascript前端
    Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser
  • 外卖霸王餐返利外卖会员卡小程序开发 闹小艾 good506070微信小程序小程序
    外卖霸王餐返利外卖会员卡小程序开发"社交电商赋能下的外卖返利小程序"是专为商家与用户双赢而设计的创新平台。以下是其开发方案的详细步骤：一、需求梳理：首先，我们需要明确小程序的核心功能和特色。包括设定活动类型、返利策略，以及用户体验友好的界面设计。二、技术决策：技术选型是关键。我们采用小程序的开发框架，利用JavaScript作为前端开发语言，并结合微信提供的API进行后端接口调用与数据处理。三、账
  • Axure设计之全屏与退出全屏交互实现 招风的黑耳 Axureaxure交互
    在AxureRP中，设计全屏与退出全屏的交互功能可以极大地提升用户体验，尤其是在展示产品原型或进行演示时。本文将详细介绍如何在AxureRP中通过结合JavaScript代码实现全屏与退出全屏的交互效果。Axure原型设计web端交互元件库：https://1zvcwx.axshare.com一、设计思路全屏与退出全屏的交互设计主要依赖于JavaScript代码来控制浏览器的全屏模式。在Axure
  • 全面指南：用户行为从前端数据采集到实时处理的最佳实践 数字沉思 营销流量运营系统架构前端内容运营大数据
    引言在当今的数据驱动世界，实时数据采集和处理已经成为企业做出及时决策的重要手段。本文将详细介绍如何通过前端JavaScript代码采集用户行为数据、利用API和Kafka进行数据传输、通过Flink实时处理数据的完整流程。无论你是想提升产品体验还是做用户行为分析，这篇文章都将为你提供全面的解决方案。设计一个通用的ClickHouse表来存储用户事件时，需要考虑多种因素，包括事件类型、时间戳、用户信
  • EcmaScript和JavaScript的区别 每天吃八顿 前端ecmascript
    ECMAScript和JavaScript是经常被混淆的两个术语，但实际上它们之间存在一些区别：ECMAScript：ECMAScript（通常缩写为ES，并且有版本号如ES5,ES6和ES7等）是由ECMA国际（EuropeanComputerManufacturersAssociation）制定的一种脚本语言的规范。这个规范定义了语法、命令、数据类型等基本元素。ECMAScript是一种规范，
  • 解线性方程组 qiuwanchi
    package gaodai.matrix; import java.util.ArrayList; import java.util.List; import java.util.Scanner; public class Test { public static void main(String[] args) { Scanner scanner = new Sc
  • 在mysql内部存储代码 annan211 性能mysql存储过程触发器
    在mysql内部存储代码 在mysql内部存储代码，既有优点也有缺点，而且有人倡导有人反对。 先看优点： 1 她在服务器内部执行，离数据最近，另外在服务器上执行还可以节省带宽和网络延迟。 2 这是一种代码重用。可以方便的统一业务规则，保证某些行为的一致性，所以也可以提供一定的安全性。 3 可以简化代码的维护和版本更新。 4 可以帮助提升安全，比如提供更细
  • Android使用Asynchronous Http Client完成登录保存cookie的问题 hotsunshine android
    Asynchronous Http Client是android中非常好的异步请求工具 除了异步之外还有很多封装比如json的处理，cookie的处理 引用 Persistent Cookie Storage with PersistentCookieStore This library also includes a PersistentCookieStore whi
  • java面试题 Array_06 java面试
    java面试题 第一，谈谈final, finally, finalize的区别。 final-修饰符（关键字）如果一个类被声明为final，意味着它不能再派生出新的子类，不能作为父类被继承。因此一个类不能既被声明为 abstract的，又被声明为final的。将变量或方法声明为final，可以保证它们在使用中不被改变。被声明为final的变量必须在声明时给定初值，而在以后的引用中只能
  • 网站加速 oloz 网站加速
    前序:本人菜鸟，此文研究总结来源于互联网上的资料，大牛请勿喷！本人虚心学习，多指教. 1、减小网页体积的大小，尽量采用div+css模式，尽量避免复杂的页面结构，能简约就简约。 2、采用Gzip对网页进行压缩；    GZIP最早由Jean-loup Gailly和Mark Adler创建，用于UNⅨ系统的文件压缩。我们在Linux中经常会用到后缀为.gz
  • 正确书写单例模式 随意而生 java 设计模式 单例
    　　单例模式算是设计模式中最容易理解，也是最容易手写代码的模式了吧。但是其中的坑却不少，所以也常作为面试题来考。本文主要对几种单例写法的整理，并分析其优缺点。很多都是一些老生常谈的问题，但如果你不知道如何创建一个线程安全的单例，不知道什么是双检锁，那这篇文章可能会帮助到你。 　　懒汉式，线程不安全 　　当被问到要实现一个单例模式时，很多人的第一反应是写出如下的代码，包括教科书上也是这样
  • 单例模式 香水浓 java
    懒汉  调用getInstance方法时实例化 public class Singleton { private static Singleton instance; private Singleton() {} public static synchronized Singleton getInstance() { if(null == ins
  • 安装Apache问题：系统找不到指定的文件 No installed service named "Apache2" AdyZhang apachehttp server
    安装Apache问题：系统找不到指定的文件 No installed service named "Apache2" 每次到这一步都很小心防它的端口冲突问题，结果，特意留出来的80端口就是不能用，烦。 解决方法确保几处： 1、停止IIS启动 2、把端口80改成其它 （譬如90，800，，，什么数字都好） 3、防火墙(关掉试试) 在运行处输入 cmd 回车，转到apa
  • 如何在android 文件选择器中选择多个图片或者视频？ aijuans android
    我的android app有这样的需求，在进行照片和视频上传的时候，需要一次性的从照片/视频库选择多条进行上传 但是android原生态的sdk中，只能一个一个的进行选择和上传。 我想知道是否有其他的android上传库可以解决这个问题，提供一个多选的功能，可以使checkbox之类的，一次选择多个 处理方法 官方的图片选择器(但是不支持所有版本的androi，只支持API Level
  • mysql中查询生日提醒的日期相关的sql baalwolf mysql
    SELECT sysid,user_name,birthday,listid,userhead_50,CONCAT(YEAR(CURDATE()),DATE_FORMAT(birthday,'-%m-%d')),CURDATE(),  dayofyear( CONCAT(YEAR(CURDATE()),DATE_FORMAT(birthday,'-%m-%d')))-dayofyear(
  • MongoDB索引文件破坏后导致查询错误的问题 BigBird2012 mongodb
    问题描述： MongoDB在非正常情况下关闭时，可能会导致索引文件破坏，造成数据在更新时没有反映到索引上。 解决方案：   使用脚本，重建MongoDB所有表的索引。 var names = db.getCollectionNames(); for( var i in names ){ var name = names[i]; print(name);
  • Javascript Promise bijian1013 JavaScriptPromise
            Parse JavaScript SDK现在提供了支持大多数异步方法的兼容jquery的Promises模式，那么这意味着什么呢，读完下文你就了解了。 一.认识Promises         “Promises”代表着在javascript程序里下一个伟大的范式，但是理解他们为什么如此伟大不是件简
  • [Zookeeper学习笔记九]Zookeeper源代码分析之Zookeeper构造过程 bit1129 zookeeper
       Zookeeper重载了几个构造函数，其中构造者可以提供参数最多，可定制性最多的构造函数是     public ZooKeeper(String connectString, int sessionTimeout, Watcher watcher, long sessionId, byte[] sessionPasswd, boolea
  • 【Java命令三】jstack bit1129 jstack
    jstack是用于获得当前运行的Java程序所有的线程的运行情况(thread dump），不同于jmap用于获得memory dump   [hadoop@hadoop sbin]$ jstack Usage: jstack [-l] <pid> (to connect to running process) jstack -F
  • jboss 5.1启停脚本　动静分离部署 ronin47
    以前启动jboss，往各种xml配置文件，现只要运行一句脚本即可。start nohup sh /**/run.sh -c servicename  -b ip -g  clustername   -u broatcast jboss.messaging.ServerPeerID=int  -Djboss.service.binding.set=p
  • UI之如何打磨设计能力? brotherlamp UIui教程ui自学ui资料ui视频
      在越来越拥挤的初创企业世界里，视觉设计的重要性往往可以与杀手级用户体验比肩。在许多情况下，尤其对于 Web 初创企业而言，这两者都是不可或缺的。前不久我们在《右脑革命：别学编程了，学艺术吧》中也曾发出过重视设计的呼吁。如何才能提高初创企业的设计能力呢?以下是 9 位创始人的体会。 1.找到自己的方式 如果你是设计师，要想提高技能可以去设计博客和展示好设计的网站如D-lists或
  • 三色旗算法 bylijinnan java算法
    import java.util.Arrays; /** 问题： 假设有一条绳子，上面有红、白、蓝三种颜色的旗子，起初绳子上的旗子颜色并没有顺序， 您希望将之分类，并排列为蓝、白、红的顺序，要如何移动次数才会最少，注意您只能在绳 子上进行这个动作，而且一次只能调换两个旗子。 网上的解法大多类似： 在一条绳子上移动，在程式中也就意味只能使用一个阵列，而不使用其它的阵列来
  • 警告:No configuration found for the specified action: \'s chiangfai configuration
    1.index.jsp页面form标签未指定namespace属性。 <!--index.jsp代码--> <%@taglib prefix="s" uri="/struts-tags"%> ... <s:form action="submit" method="post"&g
  • redis -- hash_max_zipmap_entries设置过大有问题 chenchao051 redishash
    使用redis时为了使用hash追求更高的内存使用率，我们一般都用hash结构，并且有时候会把hash_max_zipmap_entries这个值设置的很大，很多资料也推荐设置到1000，默认设置为了512，但是这里有个坑   #define ZIPMAP_BIGLEN 254 #define ZIPMAP_END 255     /* Return th
  • select into outfile access deny问题 daizj mysqltxt导出数据到文件
    本文转自：http://hatemysql.com/2010/06/29/select-into-outfile-access-deny%E9%97%AE%E9%A2%98/ 为应用建立了rnd的帐号，专门为他们查询线上数据库用的，当然，只有他们上了生产网络以后才能连上数据库，安全方面我们还是很注意的，呵呵。 授权的语句如下： grant select on armory.* to rn
  • phpexcel导出excel表简单入门示例 dcj3sjt126com PHPExcelphpexcel
    <?php error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE);   if (PHP_SAPI == 'cli') die('This example should only be run from a Web Brows
  • 美国电影超短200句 dcj3sjt126com 电影
    1. I see． 我明白了。2. I quit! 我不干了!3. Let go! 放手!4. Me too． 我也是。5. My god! 天哪!6. No way! 不行!7. Come on． 来吧(赶快)8. Hold on． 等一等。9. I agree。 我同意。10. Not bad． 还不错。11. Not yet． 还没。12. See you． 再见。13. Shut up!
  • Java访问远程服务 dyy_gusi httpclientwebservicegetpost
        随着webService的崛起，我们开始中会越来越多的使用到访问远程webService服务。当然对于不同的webService框架一般都有自己的client包供使用，但是如果使用webService框架自己的client包，那么必然需要在自己的代码中引入它的包，如果同时调运了多个不同框架的webService，那么就需要同时引入多个不同的clien
  • Maven的settings.xml配置 geeksun settings.xml
    settings.xml是Maven的配置文件，下面解释一下其中的配置含义： settings.xml存在于两个地方： 1.安装的地方：$M2_HOME/conf/settings.xml 2.用户的目录：${user.home}/.m2/settings.xml 前者又被叫做全局配置，后者被称为用户配置。如果两者都存在，它们的内容将被合并，并且用户范围的settings.xml优先。
  • ubuntu的init与系统服务设置 hongtoushizi ubuntu
    转载自：  http://iysm.net/?p=178 init Init是位于/sbin/init的一个程序，它是在linux下，在系统启动过程中，初始化所有的设备驱动程序和数据结构等之后，由内核启动的一个用户级程序，并由此init程序进而完成系统的启动过程。 ubuntu与传统的linux略有不同，使用upstart完成系统的启动，但表面上仍维持init程序的形式。 运行
  • 跟我学Nginx+Lua开发目录贴 jinnianshilongnian nginxlua
    使用Nginx+Lua开发近一年的时间，学习和实践了一些Nginx+Lua开发的架构，为了让更多人使用Nginx+Lua架构开发，利用春节期间总结了一份基本的学习教程，希望对大家有用。也欢迎谈探讨学习一些经验。    目录 第一章 安装Nginx+Lua开发环境 第二章 Nginx+Lua开发入门 第三章 Redis/SSDB+Twemproxy安装与使用 第四章 L
  • php位运算符注意事项 home198979 位运算PHP&
    $a = $b = $c = 0; $a & $b = 1; $b | $c = 1  问a,b,c最终为多少?   当看到这题时，我犯了一个低级错误，误 以为位运算符会改变变量的值。所以得出结果是1 1 0 但是位运算符是不会改变变量的值的，例如： $a=1;$b=2; $a&$b;  这样a,b的值不会有任何改变
  • Linux shell数组建立和使用技巧 pda158 linux
    1.数组定义 　　[chengmo@centos5 ~]$ a=(1 2 3 4 5) 　　[chengmo@centos5 ~]$ echo $a 　　1 　　一对括号表示是数组，数组元素用“空格”符号分割开。 　　 2.数组读取与赋值 　　得到长度： 　　[chengmo@centos5 ~]$ echo ${#a[@]} 　　5 　　用${#数组名[@或
  • hotspot源码(JDK7) ol_beta javaHotSpotjvm
    源码结构图，方便理解：   ├─agent                            Serviceab
  • Oracle基本事务和ForAll执行批量DML练习 vipbooks oraclesql
    基本事务的使用： 从账户一的余额中转100到账户二的余额中去，如果账户二不存在或账户一中的余额不足100则整笔交易回滚 select * from account; -- 创建一张账户表 create table account( -- 账户ID id number(3) not null, -- 账户名称 nam
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他