release: v3.4.0

.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,8 @@
+## 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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eruda",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "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.1",
     "core-js": "^3.37.1",
     "css-loader": "^3.4.2",
     "es-check": "^6.2.1",
@@ -65,7 +65,7 @@
     "luna-box-model": "^1.0.0",
     "luna-console": "^1.3.4",
     "luna-data-grid": "^0.6.0",
-    "luna-dom-viewer": "^1.3.0",
+    "luna-dom-viewer": "^1.4.0",
     "luna-modal": "^1.2.3",
     "luna-notification": "^0.3.2",
     "luna-object-viewer": "^0.3.1",

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

@@ -15,7 +15,7 @@ import evalCss from '../lib/evalCss'
 import Detail from './Detail'
 import chobitsu from '../lib/chobitsu'
 import emitter from '../lib/emitter'
-import { formatNodeName } from './util'
+import { formatNodeName, isShadowRoot } from './util'
 
 export default class Elements extends Tool {
   constructor() {
@@ -118,7 +118,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 +309,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

@@ -7,6 +7,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
@@ -34,3 +36,11 @@ export function formatNodeName(node, { noAttr = false } = {}) {
 
   return ret
 }
+
+export function isShadowRoot(node) {
+  if (window.ShadowRoot) {
+    return node instanceof ShadowRoot
+  }
+
+  return false
+}