release: v3.4.1

.github/CONTRIBUTING.md

@@ -1,32 +0,0 @@
-# Contributing Guide
-
-## Development Setup
-
-[Node.js](https://nodejs.org/en/) is needed for the development of eruda.
-
-After cloning the repo, run:
-
-```bash
-# install npm dependencies.
-npm install
-# copy jasmine lib from node_modules to test folder.
-npm run setup
-```
-
-## Commonly used NPM scripts
-
-```bash
-# watch and auto re-build.
-npm run dev
-# build eruda.js
-npm run build
-# lint, build and test.
-npm run ci
-```
-
-## Project Structure
-
-- **doc**: documents.
-- **build**: webpack configuration, and some other useful scripts.
-- **src**: source code, written in es2015.
-- **test**: contain pages for testing.

.github/workflows/main.yml

@@ -14,22 +14,15 @@ jobs:
 
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [18.x]
-
     steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v2
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
-        node-version: ${{ matrix.node-version }}
+        node-version: '18.x' 
     - run: |
         npm install -g @liriliri/lsla
         npm i
         npm run ci
-    - run: |
-        npm install -g codecov
-        codecov --disable=gcov
-      env:
-        CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+    - uses: codecov/codecov-action@v4
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }} 

.github/workflows/publish.yml

@@ -11,20 +11,16 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-      - name: Setup Node
-        uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: '18.x'
           registry-url: 'https://registry.npmjs.org'
-      - name: Build eruda
-        run: |
+      - run: |
           npm i -g @liriliri/lsla
           npm i
           npm run build
-      - name: Publish package on NPM
-        working-directory: dist
+      - working-directory: dist
         run: npm publish
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

CHANGELOG.md

@@ -1,3 +1,14 @@
+## 3.4.1 (10 Nov 2024)
+
+* fix: no copy and delete for shadow root
+* fix: fetch remains pending when error occurs
+* fix: theme not updated if system theme changed
+
+## 3.4.0 (27 Sep 2024)
+
+* feat: support shadow dom [#158](https://github.com/liriliri/eruda/issues/158)
+* fix: quirks mode table rendering [#459](https://github.com/liriliri/eruda/issues/459)
+
 ## 3.3.0 (9 Sep 2024)
 
 * feat: add vue devtools plugin

README.md

@@ -35,23 +35,7 @@ Console for Mobile Browsers.
 
 ![Demo](https://eruda.liriliri.io/qrcode.png)
 
-Browse it on your phone: [https://eruda.liriliri.io/](https://eruda.liriliri.io/)
-
-In order to try it for different sites, execute the script below on browser address bar.
-
-```javascript
-javascript:(function () { var script = document.createElement('script'); script.src="https://cdn.jsdelivr.net/npm/eruda"; document.body.append(script); script.onload = function () { eruda.init(); } })();
-```
-
-## Features
-
-* [Console](https://eruda.liriliri.io/docs/api.html#console): Display JavaScript logs.
-* [Elements](https://eruda.liriliri.io/docs/api.html#elements): Check dom state.
-* [Network](https://eruda.liriliri.io/docs/api.html#network): Show requests status.
-* [Resources](https://eruda.liriliri.io/docs/api.html#resources): Show localStorage, cookie information.
-* [Info](https://eruda.liriliri.io/docs/api.html#info): Show url, user agent info.
-* [Snippets](https://eruda.liriliri.io/docs/api.html#snippets): Include snippets used most often.
-* [Sources](https://eruda.liriliri.io/docs/api.html#sources): Html, js, css source viewer.
+Browse it on your phone: [eruda.liriliri.io](https://eruda.liriliri.io/)
 
 ## Install
 
@@ -75,58 +59,7 @@ It's also available on [jsDelivr](http://www.jsdelivr.com/projects/eruda) and [c
 <script>eruda.init();</script>
 ```
 
-The JavaScript file size is quite huge(about 100kb gzipped) and therefore not suitable to include in mobile pages. It's recommended to make sure eruda is loaded only when eruda is set to true on url(http://example.com/?eruda=true), for example:
-
-```javascript
-;(function () {
-    var src = '//cdn.jsdelivr.net/npm/eruda';
-    if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
-    document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
-    document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
-})();
-```
-
-If you are using modern JavaScript tooling, you can dynamically import it.
-
-```javascript
-if (import.meta.env.MODE === 'development') {
-    import('eruda').then(eruda => eruda.default.init());
-}
-```
-
-## Configuration
-
-When initialization, a configuration object can be passed in.
-
-* container: Container element. If not set, it will append an element directly
-under html root element.
-* tool: Choose which default tools you want, by default all will be added.
-
-For more information, please check the [documentation](https://eruda.liriliri.io/docs/api.html).
-
-```javascript
-let el = document.createElement('div');
-document.body.appendChild(el);
-
-eruda.init({
-    container: el,
-    tool: ['console', 'elements']
-});
-```
-
-## Plugins
-
-* [eruda-monitor](https://github.com/liriliri/eruda-monitor): Display page fps and memory.
-* [eruda-features](https://github.com/liriliri/eruda-features): Browser feature detections.
-* [eruda-timing](https://github.com/liriliri/eruda-timing): Show performance and resource timing.
-* [eruda-code](https://github.com/liriliri/eruda-code): Run JavaScript code.
-* [eruda-benchmark](https://github.com/liriliri/eruda-benchmark): Run JavaScript benchmarks.
-* [eruda-geolocation](https://github.com/liriliri/eruda-geolocation): Test geolocation.
-* [eruda-orientation](https://github.com/liriliri/eruda-orientation): Test orientation api.
-* [eruda-touches](https://github.com/liriliri/eruda-touches): Visualize screen touches.
-* [eruda-vue](https://github.com/liriliri/eruda-vue): Vue devtools.
-
-If you want to create a plugin yourself, follow the guides [here](https://eruda.liriliri.io/docs/plugin.html).
+For more detailed usage instructions, please read the documentation at [eruda.liriliri.io](https://eruda.liriliri.io/docs/)!
 
 ## Related Projects
 
@@ -149,4 +82,4 @@ If you want to create a plugin yourself, follow the guides [here](https://eruda.
 
 ## Contribution
 
-Read [Contributing Guide](.github/CONTRIBUTING.md) for development setup instructions.
+Read [Contributing Guide](https://eruda.liriliri.io/docs/contributing.html) for development setup instructions.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eruda",
-  "version": "3.3.0",
+  "version": "3.4.1",
   "description": "Console for Mobile Browsers",
   "main": "eruda.js",
   "browserslist": [
@@ -45,7 +45,7 @@
     "autoprefixer": "^9.7.4",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.5",
-    "chobitsu": "^1.5.1",
+    "chobitsu": "^1.8.4",
     "core-js": "^3.37.1",
     "css-loader": "^3.4.2",
     "es-check": "^6.2.1",
@@ -61,11 +61,11 @@
     "karma-jquery": "^0.2.4",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^5.0.0",
-    "licia": "^1.42.0",
+    "licia": "^1.44.0",
     "luna-box-model": "^1.0.0",
-    "luna-console": "^1.3.4",
-    "luna-data-grid": "^0.6.0",
-    "luna-dom-viewer": "^1.3.0",
+    "luna-console": "^1.3.5",
+    "luna-data-grid": "^1.0.0",
+    "luna-dom-viewer": "^1.4.0",
     "luna-modal": "^1.2.3",
     "luna-notification": "^0.3.2",
     "luna-object-viewer": "^0.3.1",

src/DevTools/DevTools.js

@@ -10,9 +10,10 @@ import isNum from 'licia/isNum'
 import nextTick from 'licia/nextTick'
 import $ from 'licia/$'
 import toNum from 'licia/toNum'
-import isDarkMode from 'licia/isDarkMode'
 import extend from 'licia/extend'
 import isStr from 'licia/isStr'
+import theme from 'licia/theme'
+import upperFirst from 'licia/upperFirst'
 import startWith from 'licia/startWith'
 import ready from 'licia/ready'
 import pointerEvent from 'licia/pointerEvent'
@@ -265,19 +266,19 @@ export default class DevTools extends Emitter {
       $container.rmClass(c('safe-area'))
     }
   }
-  _setTheme(theme) {
+  _setTheme(t) {
     const { $container } = this
 
-    if (theme === 'System preference') {
-      theme = isDarkMode() ? 'Dark' : 'Light'
+    if (t === 'System preference') {
+      t = upperFirst(theme.get())
     }
 
-    if (isDarkTheme(theme)) {
+    if (isDarkTheme(t)) {
       $container.addClass(c('dark'))
     } else {
       $container.rmClass(c('dark'))
     }
-    evalCss.setTheme(theme)
+    evalCss.setTheme(t)
   }
   _setTransparency(opacity) {
     if (!isNum(opacity)) return
@@ -396,5 +397,12 @@ export default class DevTools extends Emitter {
     window.addEventListener('resize', this._checkSafeArea)
 
     emitter.on(emitter.SCALE, this._updateTabHeight)
+
+    theme.on('change', () => {
+      const t = this.config.get('theme')
+      if (t === 'System preference') {
+        this._setTheme(t)
+      }
+    })
   }
 }

src/Elements/Detail.js

@@ -277,7 +277,9 @@ export default class Detail {
     const events = el.erudaEvents
     if (events && keys(events).length !== 0) ret.listeners = events
 
-    if (needNoStyle(tagName)) return ret
+    if (needNoStyle(tagName)) {
+      return ret
+    }
 
     let computedStyle = cssStore.getComputedStyle()
 
@@ -472,8 +474,9 @@ function rmDefComputedStyle(computedStyle, styles) {
 
 const NO_STYLE_TAG = ['script', 'style', 'meta', 'title', 'link', 'head']
 
-const needNoStyle = (tagName) =>
+const needNoStyle = (tagName) => {
   NO_STYLE_TAG.indexOf(tagName.toLowerCase()) > -1
+}
 
 const wrapLink = (link) => `<a href="${link}" target="_blank">${link}</a>`
 

src/Elements/Elements.js

@@ -9,6 +9,7 @@ import isEmpty from 'licia/isEmpty'
 import toNum from 'licia/toNum'
 import copy from 'licia/copy'
 import isMobile from 'licia/isMobile'
+import isShadowRoot from 'licia/isShadowRoot'
 import LunaDomViewer from 'luna-dom-viewer'
 import { isErudaEl, classPrefix as c, isChobitsuEl } from '../lib/util'
 import evalCss from '../lib/evalCss'
@@ -98,7 +99,7 @@ export default class Elements extends Tool {
 
     const node = this._curNode
 
-    if (!node) {
+    if (!node || isShadowRoot(node)) {
       return
     }
 
@@ -118,7 +119,7 @@ export default class Elements extends Tool {
     if (this._curNode.nodeType === Node.ELEMENT_NODE) {
       this._detail.show(this._curNode)
     } else {
-      this._detail.show(this._curNode.parentNode)
+      this._detail.show(this._curNode.parentNode || this._curNode.host)
     }
   }
   _initTpl() {
@@ -309,7 +310,14 @@ function getCrumbs(el) {
       idx: i++,
     })
 
-    el = el.parentElement
+    if (isShadowRoot(el)) {
+      el = el.host
+    }
+    if (!el.parentElement && isShadowRoot(el.parentNode)) {
+      el = el.parentNode
+    } else {
+      el = el.parentElement
+    }
   }
 
   return ret.reverse()

src/Elements/util.js

@@ -1,5 +1,6 @@
 import each from 'licia/each'
 import isStr from 'licia/isStr'
+import isShadowRoot from 'licia/isShadowRoot'
 import { classPrefix as c } from '../lib/util'
 
 export function formatNodeName(node, { noAttr = false } = {}) {
@@ -7,6 +8,8 @@ export function formatNodeName(node, { noAttr = false } = {}) {
     return `<span class="${c('tag-name-color')}">(text)</span>`
   } else if (node.nodeType === Node.COMMENT_NODE) {
     return `<span class="${c('tag-name-color')}"><!--></span>`
+  } else if (isShadowRoot(node)) {
+    return `<span class="${c('tag-name-color')}">#shadow-root</span>`
   }
 
   const { id, className, attributes } = node

src/Network/Network.js

@@ -203,6 +203,22 @@ export default class Network extends Tool {
 
     request.render()
   }
+  _loadingFailed = (params) => {
+    const request = this._requests[params.requestId]
+    if (!this._isRecording || !request) {
+      return
+    }
+
+    const time = params.timestamp * 1000
+    request.time = time - request.startTime
+    request.displayTime = ms(request.time)
+
+    request.hasErr = true
+    request.status = 0
+    request.done = true
+
+    request.render()
+  }
   _copyCurl = () => {
     const request = this._selectedRequest
 
@@ -322,6 +338,7 @@ export default class Network extends Tool {
     network.on('responseReceivedExtraInfo', this._resReceivedExtraInfo)
     network.on('responseReceived', this._resReceived)
     network.on('loadingFinished', this._loadingFinished)
+    network.on('loadingFailed', this._loadingFailed)
 
     emitter.on(emitter.SCALE, this._updateScale)
   }

src/Snippets/defSnippets.js

@@ -105,7 +105,7 @@ export default [
     fn() {
       loadPlugin('monitor')
     },
-    desc: 'Display page fps and memory',
+    desc: 'Display page fps, memory and dom nodes',
   },
   {
     name: 'Load Features Plugin',
@@ -224,7 +224,7 @@ function loadPlugin(name) {
 }
 
 const pluginVersion = {
-  monitor: '1.0.2',
+  monitor: '1.1.1',
   features: '2.1.0',
   timing: '2.0.1',
   code: '2.2.0',