mapbox-gl-puppeteer

.gitignore

node_modules

.node-version

8.6.0

Readme.md

Mapbox-gl diagnostics for puppeteer

http://mapbox.github.io/mapbox-gl-supported/diagnostics.html

Example of output

yarn test
yarn run v1.1.0
$ node index.js
Caught exception: TypeError: Cannot read property 'resize' of undefined
    at e.resize (https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.js:398:5311)
    at new e (https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.js:398:2935)
    at file://mapbox-gl-puppeteer/diagnostics.html:51:23

Done!

┌─────────────────────────┬────────────────────┬──────────────────────────────┬──────────────────────────────┬────────┐
│ Detection method        │ Context type       │ failIfMajorPerformanceCaveat │ Result                       │ Errors │
├─────────────────────────┼────────────────────┼──────────────────────────────┼──────────────────────────────┼────────┤
│ probablySupportsContext │ webgl              │ true                         │ detection method unavailable │ none   │
├─────────────────────────┼────────────────────┼──────────────────────────────┼──────────────────────────────┼────────┤
│ probablySupportsContext │ webgl              │ false                        │ detection method unavailable │ none   │
├─────────────────────────┼────────────────────┼──────────────────────────────┼──────────────────────────────┼────────┤
│ probablySupportsContext │ experimental-webgl │ true                         │ detection method unavailable │ none   │
├─────────────────────────┼────────────────────┼──────────────────────────────┼──────────────────────────────┼────────┤
│ probablySupportsContext │ experimental-webgl │ false                        │ detection method unavailable │ none   │
├─────────────────────────┼────────────────────┼──────────────────────────────┼──────────────────────────────┼────────┤
│ supportsContext         │ webgl              │ true                         │ detection method unavailable │ none   │
├─────────────────────────┼────────────────────┼──────────────────────────────┼──────────────────────────────┼────────┤
│ supportsContext         │ webgl              │ false                        │ detection method unavailable │ none   │
├─────────────────────────┼────────────────────┼──────────────────────────────┼──────────────────────────────┼────────┤
│ supportsContext         │ experimental-webgl │ true                         │ detection method unavailable │ none   │
├─────────────────────────┼────────────────────┼──────────────────────────────┼──────────────────────────────┼────────┤
│ supportsContext         │ experimental-webgl │ false                        │ detection method unavailable │ none   │
├─────────────────────────┼────────────────────┼──────────────────────────────┼──────────────────────────────┼────────┤
│ getContext              │ webgl              │ true                         │ null                         │ none   │
├─────────────────────────┼────────────────────┼──────────────────────────────┼──────────────────────────────┼────────┤
│ getContext              │ webgl              │ false                        │ null                         │ none   │
├─────────────────────────┼────────────────────┼──────────────────────────────┼──────────────────────────────┼────────┤
│ getContext              │ experimental-webgl │ true                         │ null                         │ none   │
├─────────────────────────┼────────────────────┼──────────────────────────────┼──────────────────────────────┼────────┤
│ getContext              │ experimental-webgl │ false                        │ null                         │ none   │
└─────────────────────────┴────────────────────┴──────────────────────────────┴──────────────────────────────┴────────┘

{}
WebGLDiagnostic report: WebGL Support: yes (but cannot acquire context)

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/63.0.3205.0 Safari/537.36
Browser vendor: Google Inc.
Browser version: 5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/63.0.3205.0 Safari/537.36
Browser language: en-US
Available resolution: 1280 x 714
Screen resolution: 1280 x 800
Color depth: 24
Pixel depth: 24

Error: TypeError: Cannot read property 'getExtension' of null
    at file://mapbox-gl-puppeteer/diagnostics.html:118:38
    at Page._handleException (mapbox-gl-puppeteer/node_modules/puppeteer/lib/Page.js:295:38)
    at Session.Page.client.on.exception (mapbox-gl-puppeteer/node_modules/puppeteer/lib/Page.js:86:60)
    at emitOne (events.js:115:13)
    at Session.emit (events.js:210:7)
    at Session._onMessage (mapbox-gl-puppeteer/node_modules/puppeteer/lib/Connection.js:199:12)
    at Connection._onMessage (mapbox-gl-puppeteer/node_modules/puppeteer/lib/Connection.js:98:19)
    at emitOne (events.js:115:13)
    at WebSocket.emit (events.js:210:7)
    at Receiver._receiver.onmessage (mapbox-gl-puppeteer/node_modules/ws/lib/WebSocket.js:143:47)
    at Receiver.dataMessage (mapbox-gl-puppeteer/node_modules/ws/lib/Receiver.js:389:14)

diagnostics.html

<!doctype html>

<html style='height: 100%;'>

<head>
    <link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />

    <style>

        body {
            display:flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        h2 {
            margin-top: 50px;
            margin-bottom: 10px;
        }

        #table, #map, #map-log, #diagnostics-log {
            width: 960px;
            margin: 10px 0;
        }

        #map {
            height: 100px;
        }

        #canvas {
            height: 0;
        }

        th code {
            font-weight: bold;
        }
    </style>
</head>

<body class='fill-gray'>

    <h2>Map instantiation diagnostics</h2>
    <div id="map"></div>
    <code id="map-log"></code>
    <script src='https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.js'></script>
    <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoibW91cm5lciIsImEiOiJWWnRiWG1VIn0.j6eccFHpE3Q04XPLI7JxbA';
        try {
            var map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/mapbox/streets-v9',
                zoom: 1
            });
            map.on('error', function(event) {
                writeLogMessage(event.error.toString());
            });
            writeLogMessage('WebGL context:', map.painter.gl);
            writeLogMessage('WebGL errors:', map.painter.gl.getError());
        } catch (e) {
            writeLogMessage('Caught exception:', e.stack || e.toString());
        }
        writeLogMessage('Done!');

        function writeLogMessage() {
            console.log(Array.prototype.join.call(arguments, ' ') + '\n');
        }
    </script>

    <h2>Support detection diagnostics</h2>
    <canvas id="canvas"></canvas>
    <script src='http://mapbox.github.io/mapbox-gl-supported/index.js'></script>
    <script>
        function performTest(detectionMethod, contextType, failIfMajorPerformanceCaveat) {
            var attributes = Object.create(mapboxgl.supported.webGLContextAttributes);
            attributes.failIfMajorPerformanceCaveat = failIfMajorPerformanceCaveat;

            var canvas = document.getElementById('canvas');
            if (canvas[detectionMethod]) {
                var results = canvas[detectionMethod](contextType, attributes);
                writeTestResults(results, results && results.getError && results.getError());
            } else {
                writeTestResults('detection method unavailable');
            }

            function writeTestResults(result, error) {
                // console.log([detectionMethod, contextType, failIfMajorPerformanceCaveat, result, error || 'none'])
                addTableRow([detectionMethod, contextType, failIfMajorPerformanceCaveat, result, error || 'none'])
            }
        }

        performTest('probablySupportsContext', 'webgl', true);
        performTest('probablySupportsContext', 'webgl', false);
        performTest('probablySupportsContext', 'experimental-webgl', true);
        performTest('probablySupportsContext', 'experimental-webgl', false);

        performTest('supportsContext', 'webgl', true);
        performTest('supportsContext', 'webgl', false);
        performTest('supportsContext', 'experimental-webgl', true);
        performTest('supportsContext', 'experimental-webgl', false);

        performTest('getContext', 'webgl', true);
        performTest('getContext', 'webgl', false);
        performTest('getContext', 'experimental-webgl', true);
        performTest('getContext', 'experimental-webgl', false);

        drawTable();
    </script>

    <h2>WebGL diagnostics</h2>
    <script src="https://cdn.rawgit.com/ashima/webgl-diagnostic/3cc7b376/js/webgldiagdata.js"></script>
    <script src="https://cdn.rawgit.com/ashima/webgl-diagnostic/3cc7b376/js/webgldiagnostic.js"></script>
    <script>
        console.log('WebGLDiagnostic report: ' + WebGLDiagnostic.report('canvas'));
        var canvasElement = document.getElementById('canvas');
        var gl = canvasElement.getContext('webgl') || canvasElement.getContext('experimental-webgl');
        var glDebugRendererInfo = gl.getExtension('WEBGL_debug_renderer_info');
        if (glDebugRendererInfo) {
            console.log('Unmasked vendor: ' + gl.getParameter(glDebugRendererInfo.UNMASKED_VENDOR_WEBGL) + '\n');
            console.log('Unmasked renderer: ' + gl.getParameter(glDebugRendererInfo.UNMASKED_RENDERER_WEBGL) + '\n');
        } else {
            console.log('"WEBGL_debug_renderer_info" extension unavailable');
        }
    </script>
</body>
</html>

index.js

const puppeteer = require('puppeteer');
const Table = require('cli-table');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  page.on("console", msg => console.log(msg));
  page.on("error", msg => console.log(msg));
  page.on("pageerror", msg => console.log(msg));
  page.on("requestfailed", msg => console.log(msg));
  const table = new Table({
    head: ['Detection method', 'Context type', 'failIfMajorPerformanceCaveat', 'Result', 'Errors']
  });
  await page.exposeFunction('addTableRow', row => table.push(row.map(x => `${x}`)));
  await page.exposeFunction('drawTable', () => console.log(table.toString(), "\n"));
  await page.goto(`file://${__dirname}/diagnostics.html`);
  await page.waitFor(1000);
  await browser.close();
})();

package.json

{
  "name": "mapbox-gl-puppeteer",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "cli-table": "^0.3.1",
    "puppeteer": "^0.11.0"
  },
  "scripts": {
    "test": "node index.js"
  }
}

yarn.lock

# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1


agent-base@^4.1.0:
  version "4.1.1"
  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.1.1.tgz#92d8a4fc2524a3b09b3666a33b6c97960f23d6a4"
  dependencies:
    es6-promisify "^5.0.0"

async-limiter@~1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"

balanced-match@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"

brace-expansion@^1.1.7:
  version "1.1.8"
  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
  dependencies:
    balanced-match "^1.0.0"
    concat-map "0.0.1"

cli-table@^0.3.1:
  version "0.3.1"
  resolved "https://registry.yarnpkg.com/cli-table/-/cli-table-0.3.1.tgz#f53b05266a8b1a0b934b3d0821e6e2dc5914ae23"
  dependencies:
    colors "1.0.3"

colors@1.0.3:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/colors/-/colors-1.0.3.tgz#0433f44d809680fdeb60ed260f1b0c262e82a40b"

concat-map@0.0.1:
  version "0.0.1"
  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"

concat-stream@1.6.0:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
  dependencies:
    inherits "^2.0.3"
    readable-stream "^2.2.2"
    typedarray "^0.0.6"

core-util-is@~1.0.0:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"

debug@2.2.0:
  version "2.2.0"
  resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
  dependencies:
    ms "0.7.1"

debug@^2.4.1, debug@^2.6.8:
  version "2.6.9"
  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
  dependencies:
    ms "2.0.0"

es6-promise@^4.0.3:
  version "4.1.1"
  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.1.1.tgz#8811e90915d9a0dba36274f0b242dbda78f9c92a"

es6-promisify@^5.0.0:
  version "5.0.0"
  resolved "https://registry.yarnpkg.com/es6-promisify/-/es6-promisify-5.0.0.tgz#5109d62f3e56ea967c4b63505aef08291c8a5203"
  dependencies:
    es6-promise "^4.0.3"

extract-zip@^1.6.5:
  version "1.6.5"
  resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-1.6.5.tgz#99a06735b6ea20ea9b705d779acffcc87cff0440"
  dependencies:
    concat-stream "1.6.0"
    debug "2.2.0"
    mkdirp "0.5.0"
    yauzl "2.4.1"

fd-slicer@~1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.0.1.tgz#8b5bcbd9ec327c5041bf9ab023fd6750f1177e65"
  dependencies:
    pend "~1.2.0"

fs.realpath@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"

glob@^7.0.5:
  version "7.1.2"
  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
  dependencies:
    fs.realpath "^1.0.0"
    inflight "^1.0.4"
    inherits "2"
    minimatch "^3.0.4"
    once "^1.3.0"
    path-is-absolute "^1.0.0"

https-proxy-agent@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-2.1.0.tgz#1391bee7fd66aeabc0df2a1fa90f58954f43e443"
  dependencies:
    agent-base "^4.1.0"
    debug "^2.4.1"

inflight@^1.0.4:
  version "1.0.6"
  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
  dependencies:
    once "^1.3.0"
    wrappy "1"

inherits@2, inherits@^2.0.3, inherits@~2.0.3:
  version "2.0.3"
  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"

isarray@~1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"

mime@^1.3.4:
  version "1.4.1"
  resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"

minimatch@^3.0.4:
  version "3.0.4"
  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
  dependencies:
    brace-expansion "^1.1.7"

minimist@0.0.8:
  version "0.0.8"
  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"

mkdirp@0.5.0:
  version "0.5.0"
  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.0.tgz#1d73076a6df986cd9344e15e71fcc05a4c9abf12"
  dependencies:
    minimist "0.0.8"

ms@0.7.1:
  version "0.7.1"
  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"

ms@2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"

once@^1.3.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
  dependencies:
    wrappy "1"

path-is-absolute@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"

pend@~1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"

process-nextick-args@~1.0.6:
  version "1.0.7"
  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"

progress@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.0.tgz#8a1be366bf8fc23db2bd23f10c6fe920b4389d1f"

proxy-from-env@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.0.0.tgz#33c50398f70ea7eb96d21f7b817630a55791c7ee"

puppeteer@^0.11.0:
  version "0.11.0"
  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-0.11.0.tgz#0a2b856f3c2745a5884c6dde9fb44f96663988ed"
  dependencies:
    debug "^2.6.8"
    extract-zip "^1.6.5"
    https-proxy-agent "^2.1.0"
    mime "^1.3.4"
    progress "^2.0.0"
    proxy-from-env "^1.0.0"
    rimraf "^2.6.1"
    ws "^3.0.0"

readable-stream@^2.2.2:
  version "2.3.3"
  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
  dependencies:
    core-util-is "~1.0.0"
    inherits "~2.0.3"
    isarray "~1.0.0"
    process-nextick-args "~1.0.6"
    safe-buffer "~5.1.1"
    string_decoder "~1.0.3"
    util-deprecate "~1.0.1"

rimraf@^2.6.1:
  version "2.6.2"
  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
  dependencies:
    glob "^7.0.5"

safe-buffer@~5.1.0, safe-buffer@~5.1.1:
  version "5.1.1"
  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"

string_decoder@~1.0.3:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
  dependencies:
    safe-buffer "~5.1.0"

typedarray@^0.0.6:
  version "0.0.6"
  resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"

ultron@~1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.0.tgz#b07a2e6a541a815fc6a34ccd4533baec307ca864"

util-deprecate@~1.0.1:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"

wrappy@1:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"

ws@^3.0.0:
  version "3.2.0"
  resolved "https://registry.yarnpkg.com/ws/-/ws-3.2.0.tgz#d5d3d6b11aff71e73f808f40cc69d52bb6d4a185"
  dependencies:
    async-limiter "~1.0.0"
    safe-buffer "~5.1.0"
    ultron "~1.1.0"

yauzl@2.4.1:
  version "2.4.1"
  resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.4.1.tgz#9528f442dab1b2284e58b4379bb194e22e0c4005"
  dependencies:
    fd-slicer "~1.0.1"