Giter Site home page Giter Site logo

dps's Issues

关于页面需要登陆问题

请问一下,有很多页面需要登录之后才能正常预览和生成骨架屏,这里你们是如何来解决的呢?
配置 setExtraHTTPHeaders 吗
还是用puppeteer的setCookie来处理?

生成骨架屏是空白

配置

const dpsConfig = {
  url: 'https://baidu.com', // 待生成骨架屏页面的地址,用百度(https://baidu.com)试试也可以
  output: {
    filepath: '/Users/w/work/example/index1.html', // 生成骨架屏的存放页面,一般为项目的入口页面
    injectSelector: '#app' // 生成的骨架屏插入页面的节点
  },
  background: '#eee',
  animation: 'opacity 1s linear infinite;'
}

module.exports = dpsConfig;

dps -v 1.0.8

dps start
skeleton screen has created and output to /Users/w/work/example/index1.html

/Users/w/work/example/index1.html 内容

<html><head></head><body></body></html>

我用百度做骨架屏出来什么都没有~

生成的html就是这样的

我的配置

const dpsConfig = {
url: 'https://baidu.com', // 待生成骨架屏页面的地址,用百度(https://baidu.com)试试也可以
output: {
filepath: '/Users/luoxue/Desktop/cli/index.html', // 生成骨架屏的存放页面,一般为项目的入口页面
injectSelector: '#wrapper' // 生成的骨架屏插入页面的节点
},
background: '#eee',
animation: 'opacity 1s linear infinite;',
includeElement: function(node, draw) {
// 定制某个节点画出来的样子,带上return false
// if(node.id == 'ui-alert') {
// 跳过该节点及其子节点
// return false;
// }
// if(node.tagName.toLowerCase() === 'img') {
// 对该图片生成宽100%,高8%,颜色为红色的色块
// draw({
// width: 100,
// height: 8,
// left: 0,
// top: 0,
// zIndex: 99999999,
// background: 'red'
// });
// return false;
// }
},
writePageStructure: function(html) {
// 自己处理生成的骨架屏
// fs.writeFileSync(filepath, html);
// console.log(html)
},
init: function() {
// 生成骨架屏之前的操作,比如删除干扰节点
}
}

module.exports = dpsConfig;

单页生成

单页能不能生成加载数据后的骨架屏?

windows系统报路径错误

我在windows系统下用不了,配置如下:

const dpsConfig = {
url: 'https://baidu.com', // 待生成骨架屏页面的地址,用百度(https://baidu.com)试试也可以
output: {
filepath: 'E:\code\_test\dps-test\index.html', // 生成骨架屏的存放页面,一般为项目的入口页面
injectSelector: '#app' // 生成的骨架屏插入页面的节点
},
background: '#eee',
animation: 'opacity 1s linear infinite;',
}

module.exports = dpsConfig;

报错如下:
[dps]: [output.filepath] should be a file !

似乎是识别不了windows路径,怎么办?

dps init 提示找不到dps命令

image

环境: ubuntu 16.04 lst
npm : 6.9.0
node: v12.4.0

npm i draw-page-structure -g 后, dps init 报上面的错

麻烦作者大大,帮忙看下,或者给个具体实例demo,感激不尽~

关于dps的几点优化建议

1.evalDOM,js文件中deepFindNode方法中关于绘制元素的条件判断:t < win_h - 100这个判断项会导致屏幕底部的导航栏无法正常绘制,就需要开发者在includeElement写一大段代码自行绘制,建议把这项判断改为 (t < win_h - 100 || (getArgtype($this.includeElement) === 'function' && $this.includeElement(node, drawBlock) == true)),这样就能通过在includeElement中为指定节点返回true来进行绘制了;
2.代码调试相关:在源代码中打印信息控制台不显示,建议在pp.js文件中监听无头浏览器的console事件并打印出来。
3.建议为无头浏览器追加sessionStorage,localStorage等选项。

点赞,加油!

启动失败

详情如下:
[root@izul Node]# dps start
∙∙∙ (node:12558) UnhandledPromiseRejectionWarning: Error: Failed to launch the browser process!
/nvm/versions/node/v12.18.0/lib/node_modules/puppeteer/.local-chromium/linux-756035/chrome-linux/chrome: error while loading shared libraries: libXcomposite.so.1: cannot open shared object file: No such file or directory

TROUBLESHOOTING: https://github.com/puppeteer/puppeteer/blob/master/docs/troubleshooting.md

at onClose (/nvm/versions/node/v12.18.0/lib/node_modules/puppeteer/lib/launcher/BrowserRunner.js:159:20)
at Interface.<anonymous> (/nvm/versions/node/v12.18.0/lib/node_modules/puppeteer/lib/launcher/BrowserRunner.js:149:65)
at Interface.emit (events.js:327:22)
at Interface.close (readline.js:416:8)
at Socket.onend (readline.js:194:10)
at Socket.emit (events.js:327:22)
at endReadableNT (_stream_readable.js:1221:12)
at processTicksAndRejections (internal/process/task_queues.js:84:21)

(node:12558) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:12558) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
●∙∙ 启动浏览器...
∙∙● 启动浏览器...
∙●∙ 启动浏览器...^C

dps start启动失败

  • (node:3076) UnhandledPromiseRejectionWarning: Error: Could not find browser revision 782078. Run "PUPPETEER_PRODUCT=fi
    refox npm install" or "PUPPETEER_PRODUCT=firefox yarn install" to download a supported Firefox browser binary.
    at ChromeLauncher.launch (D:\vueProject\nodejs\node_global\node_modules\puppeteer\lib\cjs\puppeteer\node\Launcher.js
    :86:23)
    at async pp (D:\vueProject\nodejs\node_global\node_modules\draw-page-structure\src\pp.js:11:19)
    at async DrawPageStructure.start (D:\vueProject\nodejs\node_global\node_modules\draw-page-structure\src\index.js:121
    :16)
    (node:3076) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing insi
    de of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To termina
    te the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs
    .org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
    (node:3076) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections
    that are not handled will terminate the Node.js process with a non-zero exit code.
    | 启动浏览器...

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.