Migrated from GitHub

.eustia.js

@@ -0,0 +1,9 @@
+module.exports = {
+  test: {
+    library: ['node_modules/eustia-module'],
+    files: ['test/*.js', 'test/*.html'],
+    exclude: ['js'],
+    namespace: 'util',
+    output: 'test/util.js',
+  },
+}

.prettierignore

@@ -0,0 +1 @@
+test/util.js

.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "tabWidth": 2,
+  "semi": false
+}

CHANGELOG.md

@@ -0,0 +1,489 @@
+## 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
+
+## 3.2.3 (10 AUG 2024)
+
+* fix: WebSocket message base64 encoded [#447](https://github.com/liriliri/eruda/issues/447)
+
+## 3.2.2 (8 AUG 2024)
+
+* chore: update plugin versions
+
+## 3.2.1 (20 JUL 2024)
+
+* fix: touches plugin [#344](https://github.com/liriliri/eruda/issues/344)
+
+## 3.2.0 (16 JUL 2024)
+
+* feat: support inline mode
+* feat: allow spaces in plugin name
+* fix: some typescript d.ts mistakes
+* chore: remove elements set api
+* chore: update monitor plugin version
+
+## 3.1.0 (9 JUL 2024)
+
+* feat: add AMOLED theme [#414](https://github.com/liriliri/eruda/pull/414)
+* feat: support system preference theme config
+* feat: add isDarkTheme, getTheme util
+* fix: backers.svg lazy loading [#407](https://github.com/liriliri/eruda/issues/407)
+
+## 3.0.1 (18 JUL 2023)
+
+* fix: can not print string with %o [#336](https://github.com/liriliri/eruda/issues/336)
+* fix: mouse event on touch device [#302](https://github.com/liriliri/eruda/issues/302)
+* fix: unable to remove snippets [#349](https://github.com/liriliri/eruda/issues/349)
+
+## 3.0.0 (2 Apr 2023)
+
+* feat: replace fps and memory with monitor plugin
+* fix: resource stylesheet show failed
+* chore: remove licia utils
+* chore: separate polyfill
+
+## 2.11.3 (3 Mar 2023)
+
+* fix: scale [#307](https://github.com/liriliri/eruda/issues/307)
+
+## 2.11.2 (28 Jan 2023)
+
+* fix: check safe area error
+
+## 2.11.1 (28 Jan 2023)
+
+* fix: bottom safe area
+* fix(console): filter function support
+* fix: click event stop propagation [#155](https://github.com/liriliri/eruda/issues/155)
+* fix: worker null error [#152](https://github.com/liriliri/eruda/issues/152)
+
+## 2.11.0 (19 Jan 2023)
+
+* feat(network): filter
+* feat(info): add backers
+* feat(settings): use luna setting
+* feat(resources): use luna data grid
+* feat(resources): copy storage, cookie
+* fix(sources): code not selectable
+* fix(console): filter api
+
+## 2.10.0 (24 Dec 2022)
+
+* feat(sources): use luna text viewer
+* feat(elements): split mode
+* feat(network): split mode
+* fix(resources): delete cookie
+
+## 2.9.1 (20 Dec 2022)
+
+* fix(elements): select element using touch events
+
+## 2.9.0 (20 Dec 2022)
+
+* feat(elements): integrate dom viewer
+* feat(elements): element crumbs
+* feat(elements): copy node and delete node
+* feat(network): copy response
+* feat(network): toggle recording
+* chore: remove dom plugin snippet
+
+## 2.8.3 (13 Dec 2022)
+
+* fix(network): remove data grid ios outline
+* chore: update luna console and luna object viewer 
+
+## 2.8.2 (12 Dec 2022)
+
+* fix: some variables not reset when destroy
+
+## 2.8.1 (12 Dec 2022)
+
+* fix: remove luna syntax highlighter
+
+## 2.8.0 (11 Dec 2022)
+
+* feat(info): copy
+* feat(sources): use luna syntax highlighter
+* feat(network): use luna data grid
+* feat(network): copy as curl [#220](https://github.com/liriliri/eruda/issues/220)
+* fix(network): recognize JSON [#201](https://github.com/liriliri/eruda/issues/201)
+* fix: init with shadow dom style error [#195](https://github.com/liriliri/eruda/issues/195)
+
+## 2.7.4 (10 Dec 2022)
+
+* fix: firefox document.body is null error [#293](https://github.com/liriliri/eruda/issues/293)
+
+## 2.7.3 (8 Dec 2022)
+
+* fix: remove tabs horizontal scrollbar [#236](https://github.com/liriliri/eruda/issues/236)
+
+## 2.7.2 (7 Dec 2022)
+
+* fix: luna modal style
+
+## 2.7.1 (7 Dec 2022)
+
+* fix: remove debug log
+
+## 2.7.0 (7 Dec 2022)
+
+* feat: drag to resize
+* feat: update icons
+* feat: use luna modal to replace browser prompt
+
+## 2.6.2 (3 Dec 2022)
+
+* feat: support android 5.0
+* feat(sources): remove code beautify
+* fix: code plugin theme
+
+## 2.6.1 (26 Nov 2022)
+
+* fix: dark mode scrollbar style
+* fix: unable to load timing plugin
+
+## 2.6.0 (25 Nov 2022)
+
+* feat(console): select and copy
+* chore: update luna console
+* chore: update chobitsu
+
+## 2.5.0 (9 Jul 2022)
+
+* feat: add ts declaration [#187](https://github.com/liriliri/eruda/pull/187)
+* refactor: use luna console
+* refactor: use chobitsu for highlighting element
+
+## 2.4.1 (28 Sep 2020)
+
+* fix: remove arrow function [#160](https://github.com/liriliri/eruda/issues/160)
+
+## 2.4.0 (14 Sep 2020)
+
+* feat: default settings [#141](https://github.com/liriliri/eruda/issues/141)
+* fix(elements): highlight
+* fix(console): blinks frequently as it scroll to the border
+* refactor: use chobitsu
+
+## 2.3.3 (3 May 2020)
+
+* fix: unsafe-eval CSP violation [#140](https://github.com/liriliri/eruda/issues/140)
+
+## v2.3.2 (29 Apr 2020)
+
+* fix(console): scroll performance
+
+## v2.3.1 (28 Apr 2020)
+
+* fix(elements): content highlight
+
+## v2.3.0 (28 Apr 2020)
+
+* feat: refresh notification
+* fix(console): safari bounce effect
+* fix(elements): highlight
+
+## v2.2.2 (17 Apr 2020)
+
+* fix(console): extra info from
+* chore: update icons
+
+## v2.2.1 (20 Mar 2020)
+
+* fix: redundant evaluated style
+* chore: use [luna-object-viewer](https://github.com/liriliri/luna) for viewing object
+
+## v2.2.0 (9 Feb 2020)
+
+* feat: use dark theme for dark mode
+* feat(elements): computed style filter
+* feat(resources): storage and cookie filter
+* fix(snippet): error loading plugin for local page
+* fix(console): unable to clear filter
+
+## v2.1.0 (2 Feb 2020)
+
+* feat: change navigation bar height
+* feat: change default transparency to 1
+* feat: change loaded plugin position
+* feat(console): remove debug filter
+* feat(console): improve input style
+* feat(console): show filter text
+* feat(network): add requests api [#132](https://github.com/liriliri/eruda/issues/132)
+
+## v2.0.2 (9 Jan 2020)
+
+* chore: reduce file size (452kb -> 418kb)
+
+## v2.0.1 (6 Jan 2020)
+
+* chore: update plugins
+
+## v2.0.0 (3 Jan 2020)
+
+* feat: theme support
+* feat(console): $x utility
+* feat(console): remove useWorker
+* feat(sources): indent size configuration
+* fix(console): url recognition
+* fix(console): log style
+* fix(sources): scrolling
+* perf(console): large object expansion
+* chore: reduce file size (472kb -> 452kb)
+
+## v1.10.3 (8 Nov 2019)
+
+* fix(info): escape location [#127](https://github.com/liriliri/eruda/issues/127)
+* chore: update refresh icon
+* chore: update timing plugin version
+
+## v1.10.2 (5 Nov 2019)
+
+* fix: must add .default if using require 
+
+## v1.10.1 (4 Nov 2019)
+
+* fix(console): error display when js execution disabled
+
+## v1.10.0 (4 Nov 2019)
+
+* chore: updated to babel7, must add .default if using require 
+* feat(console): multiple console instance
+* perf(console): rendering for a large number of logs
+
+## v1.9.2 (1 Nov 2019)
+
+* perf(console): rendering
+
+## v1.9.1 (27 Oct 2019)
+
+* perf(console): asynchronous log render
+* perf(console): reduce memory usage, 50% drop
+
+## v1.9.0 (20 Oct 2019)
+
+* feat: add snippet for loading touches plugin
+* feat: add fit screen snippet
+* fix(console): filter shouldn't affect group
+
+## v1.8.1 (14 Oct 2019)
+
+* fix(network): style [#121](https://github.com/liriliri/eruda/issues/121)
+
+## v1.8.0 (13 Oct 2019)
+
+* feat(network): display optimization
+* feat: move http view from sources to network
+* fix(console): group object expansion
+
+## v1.7.2 (11 Oct 2019)
+
+* fix(console): blank bottom if js input is disabled
+* chore: update eruda-dom version
+
+## v1.7.1 (10 Oct 2019)
+
+* fix: resize
+
+## v1.7.0 (8 Oct 2019)
+
+* feat: resize [#89](https://github.com/liriliri/eruda/issues/89)
+* feat(console): replace help button with filter
+* feat(console): disable js execution
+* feat(console): [utilities api](https://developers.google.cn/web/tools/chrome-devtools/console/utilities)
+* fix(console): disable log collapsing for group
+* fix(elements): select not working for desktop
+
+## v1.6.3 (1 Oct 2019)
+
+* fix(console): log border style
+
+## v1.6.2 (29 Sep 2019)
+
+* fix: container style affected [#119](https://github.com/liriliri/eruda/issues/119)
+* fix(console): log style, line-height should be normal
+
+## v1.6.1 (27 Sep 2019)
+
+* feat(network): catch fetch request headers
+* feat(console): timeLog, countReset
+* fix(console): clear not working
+* fix(console): table
+
+## v1.6.0 (26 Sep 2019)
+
+* feat: console group
+* fix: console style, width and height is forbidden
+* fix: regexp json view
+* chore: update fps and memory plugin version
+
+## v1.5.8 (2 Aug 2019)
+
+* fix: safeStorage undefined [#108](https://github.com/liriliri/eruda/issues/108)
+
+## v1.5.7 (15 Jul 2019)
+
+* Fix iOS max log number
+* Disable calling init if already initialized
+* Disable worker by default
+* Support xhr blob response type [#104](https://github.com/liriliri/eruda/issues/100)
+
+## v1.5.6 (17 Jun 2019)
+
+* Disable log collapse for objects
+
+## v1.5.5 (25 May 2019)
+
+* Fix resources error when cookie has % [#100](https://github.com/liriliri/eruda/issues/100)
+* Update dom plugin version
+
+## v1.5.4 (23 Sep 2018)
+
+* Fix network url start with //
+* Smaller padding for logs
+
+## v1.5.3 (2 Sep 2018)
+
+* Add load dom plugin snippet
+* Disable highlight for invisible elements
+* Fix unexpected token \t in JSON
+* Add load orientation plugin snippet
+
+## v1.5.2 (23 Aug 2018)
+
+* Fix console show in sources panel
+* Fix log merge
+* Support getting entryBtn instance
+* Update timing plugin version
+* Add remove setting api
+* Fix safari merge log exception
+
+## v1.5.1 (18 Aug 2018)
+
+* Fix uglifyjs unicode escape [#69](https://github.com/liriliri/eruda/issues/69)
+* Update icons, use [iconfont](http://www.iconfont.cn) instead of [icomoon](https://icomoon.io/)
+* Show custom request headers [#78](https://github.com/liriliri/eruda/pull/78)
+* Add get api to info panel [#83](https://github.com/liriliri/eruda/issues/83)
+* Fix responseType json error [#82](https://github.com/liriliri/eruda/issues/82)
+* Support console lazy evaluation
+
+## v1.5.0 (19 Jun 2018)
+
+* Use shadow dom to encapsulate css
+* Enable sources copy [#71](https://github.com/liriliri/eruda/issues/71)
+* Improve **borderAll** style
+* Add **position** api [#74](https://github.com/liriliri/eruda/issues/74)
+* Fix nav bottom bar wrong position when removed
+
+## v1.4.4 (27 May 2018)
+
+* Improve console line break display
+* Add **rmCookie** util
+* Add **Load Geolocation Plugin** snippet
+* Fix Elements cssRules [#63](https://github.com/liriliri/eruda/issues/63)
+* Support console events [#66](https://github.com/liriliri/eruda/issues/66)
+* Fix Uc browser console worker [#62](https://github.com/liriliri/eruda/issues/62)
+
+## v1.4.3 (7 Feb 2018)
+
+* Dynamic info content support [#51](https://github.com/liriliri/eruda/issues/51)
+* Fix console input covered by error log
+* Add elements box model chart
+* Fix source code white-space style [#53](https://github.com/liriliri/eruda/issues/53)
+* Resources support iframe
+* Add **Load Benchmark Plugin** snippet
+
+## v1.4.2 (28 Jan 2018)
+
+* Extract viewportScale util into [eris](https://github.com/liriliri/eris)
+* Improve image list view using flex
+* Add DevTools display event hooks [#50](https://github.com/liriliri/eruda/issues/50)
+
+## v1.4.1 (13 Jan 2018)
+
+* Update timing plugin version
+* Fix viewportScale
+* Optimize console performance for big data
+* Expose snippets run api
+* Delete desktop scrollbar style
+* Add code plugin to snippets
+
+## v1.4.0 (7 Jan 2018)
+
+* Remove network timing into external plugin
+* Add system info
+* Add memory plugin snippet
+* Monitor fetch requests [#24](https://github.com/liriliri/eruda/issues/24)
+* Reduce json viewer click area
+* Use resource timing for image capture
+
+## v1.3.2 (14 Dec 2017)
+
+* Fix restore settings snippet
+* Extract *features* into an external plugin
+
+## v1.3.1 (19 Nov 2017)
+
+* Observe elements in resources panel
+* Fix performance timing not supported [#40](https://github.com/liriliri/eruda/issues/40)
+
+## v1.3.0 (5 Nov 2017)
+
+* Remove log margin
+* Fix css custom properties [#33](https://github.com/liriliri/eruda/issues/33)
+* Add version info
+* Change icomoon generated font name
+* Improve snippets style
+* Add *Load Fps Plugin* and *Restore Settings* snippets
+* Support navbar color customization
+* Support range in settings panel
+* Support auto scale [#32](https://github.com/liriliri/eruda/issues/32)
+* Improve *Border All* snippet
+* Use high resolution time for console time
+
+## v1.2.6 (31 Aug 2017)
+
+* Fix catch global errors
+
+## v1.2.5 (20 Aug 2017)
+
+* Fix cookie URI malformed
+* Fix single string argument unescaped
+* Update util library and dependencies
+* Fix catch event listeners [#31](https://github.com/liriliri/eruda/issues/31)
+* Console log scroll automatically only at bottom
+* Fix unformatted html tag
+
+## v1.2.4 (1 Jul 2017)
+
+* Fix uncaught promise error [#29](https://github.com/liriliri/eruda/issues/23)
+* Fix bad classes [#28](https://github.com/liriliri/eruda/issues/23)
+
+## v1.2.3 (15 May 2017)
+
+* Disable modernizr classes
+* Update eustia util
+* Fix console resize [#23](https://github.com/liriliri/eruda/issues/23)
+* Improve object log
+* Use outline for borderAll snippet
+
+## v1.2.2 (11 Mar 2017)
+
+* Fix log url recognition
+* Fix error log stack url and style
+* Fix table log ouput
+* Fix storage initialization [#20](https://github.com/liriliri/eruda/issues/20)
+* Update eustia lib
+* Elements auto refresh
+* Add pc scrollbar style

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016-present liriliri
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

ORIGINAL_README.md

@@ -0,0 +1,85 @@
+<div align="center">
+  <a href="https://eruda.liriliri.io/" target="_blank">
+    <img src="https://eruda.liriliri.io/icon.png" width="400">
+  </a>
+</div>
+
+<h1 align="center">Eruda</h1>
+
+<div align="center">
+
+Console for Mobile Browsers.
+
+[![NPM version][npm-image]][npm-url]
+[![Build status][ci-image]][ci-url]
+[![Test coverage][codecov-image]][codecov-url]
+[![Downloads][jsdelivr-image]][jsdelivr-url]
+[![License][license-image]][npm-url]
+
+</div>
+
+[npm-image]: https://img.shields.io/npm/v/eruda?style=flat-square
+[npm-url]: https://npmjs.org/package/eruda
+[jsdelivr-image]: https://img.shields.io/jsdelivr/npm/hm/eruda?style=flat-square
+[jsdelivr-url]: https://www.jsdelivr.com/package/npm/eruda
+[ci-image]: https://img.shields.io/github/actions/workflow/status/liriliri/eruda/main.yml?branch=master&style=flat-square
+[ci-url]: https://github.com/liriliri/eruda/actions/workflows/main.yml 
+[codecov-image]: https://img.shields.io/codecov/c/github/liriliri/eruda?style=flat-square
+[codecov-url]: https://codecov.io/github/liriliri/eruda?branch=master
+[license-image]: https://img.shields.io/npm/l/eruda?style=flat-square
+[donate-image]: https://img.shields.io/badge/$-donate-0070ba.svg?style=flat-square
+
+<img src="https://eruda.liriliri.io/screenshot.jpg" style="width:100%">
+
+## Demo
+
+![Demo](https://eruda.liriliri.io/qrcode.png)
+
+Browse it on your phone: [eruda.liriliri.io](https://eruda.liriliri.io/)
+
+## Install
+
+You can get it on npm.
+
+```bash
+npm install eruda --save-dev
+```
+
+Add this script to your page.
+
+```html
+<script src="node_modules/eruda/eruda.js"></script>
+<script>eruda.init();</script>
+```
+
+It's also available on [jsDelivr](http://www.jsdelivr.com/projects/eruda) and [cdnjs](https://cdnjs.com/libraries/eruda).
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
+<script>eruda.init();</script>
+```
+
+For more detailed usage instructions, please read the documentation at [eruda.liriliri.io](https://eruda.liriliri.io/docs/)!
+
+## Related Projects
+
+* [eruda-android](https://github.com/liriliri/eruda-android): Simple webview with eruda loaded automatically.
+* [chii](https://github.com/liriliri/chii): Remote debugging tool.
+* [chobitsu](https://github.com/liriliri/chobitsu): Chrome devtools protocol JavaScript implementation.
+* [licia](https://github.com/liriliri/licia): Utility library used by eruda.
+* [luna](https://github.com/liriliri/luna): UI components used by eruda.
+* [vivy](https://github.com/liriliri/vivy-docs): Icon image generation.
+
+## Third Party
+
+* [eruda-pixel](https://github.com/Faithree/eruda-pixel): UI pixel restoration tool.
+* [eruda-webpack-plugin](https://github.com/huruji/eruda-webpack-plugin): Eruda webpack plugin.
+* [eruda-vue-devtools](https://github.com/Zippowxk/vue-devtools-plugin): Eruda Vue-devtools plugin.
+
+## Backers
+
+<a rel="noreferrer noopener" href="https://opencollective.com/eruda" target="_blank"><img src="https://opencollective.com/eruda/backers.svg?width=890"></a>
+
+## Contribution
+
+Read [Contributing Guide](https://eruda.liriliri.io/docs/contributing.html) for development setup instructions.

build/build.js

@@ -0,0 +1,13 @@
+const path = require('path')
+const fs = require('licia/fs')
+
+const pkg = require('../package.json')
+
+delete pkg.scripts
+delete pkg.devDependencies
+
+fs.writeFile(
+  path.resolve(__dirname, '../dist/package.json'),
+  JSON.stringify(pkg, null, 2),
+  'utf8'
+)

build/loaders/handlebars-minifier-loader.js

@@ -0,0 +1,3 @@
+module.exports = function (src) {
+    return src.replace(/"loc":\{"start":\{"line":\d+,"column":\d+},"end":\{"line":\d+,"column":\d+\}\}/g, '')
+}

build/webpack.analyser.js

@@ -0,0 +1,8 @@
+const BundleAnalyzerPlugin =
+  require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+
+exports = require('./webpack.prod')
+
+exports.plugins.push(new BundleAnalyzerPlugin())
+
+module.exports = exports

build/webpack.base.js

@@ -0,0 +1,112 @@
+const autoprefixer = require('autoprefixer')
+const prefixer = require('postcss-prefixer')
+const clean = require('postcss-clean')
+const webpack = require('webpack')
+const pkg = require('../package.json')
+const path = require('path')
+const ESLintPlugin = require('eslint-webpack-plugin')
+
+process.traceDeprecation = true
+
+const banner = pkg.name + ' v' + pkg.version + ' ' + pkg.homepage
+
+const postcssLoader = {
+  loader: 'postcss-loader',
+  options: {
+    plugins: [
+      prefixer({
+        prefix: '_',
+        ignore: [/luna-*/],
+      }),
+      autoprefixer,
+      clean(),
+    ],
+  },
+}
+
+const rawLoader = {
+  loader: 'raw-loader',
+  options: {
+    esModule: false,
+  },
+}
+
+module.exports = {
+  entry: './src/index',
+  resolve: {
+    symlinks: false,
+    alias: {
+      axios: path.resolve(__dirname, '../src/lib/empty.js'),
+      micromark: path.resolve(__dirname, '../src/lib/micromark.js'),
+    },
+  },
+  devServer: {
+    static: {
+      directory: path.join(__dirname, '../test'),
+    },
+    port: 8080,
+  },
+  output: {
+    path: path.resolve(__dirname, '../dist'),
+    publicPath: '/assets/',
+    library: 'eruda',
+    libraryTarget: 'umd',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        include: [
+          path.resolve(__dirname, '../src'),
+          path.resolve(__dirname, '../node_modules/luna-console'),
+          path.resolve(__dirname, '../node_modules/luna-modal'),
+          path.resolve(__dirname, '../node_modules/luna-tab'),
+          path.resolve(__dirname, '../node_modules/luna-data-grid'),
+          path.resolve(__dirname, '../node_modules/luna-object-viewer'),
+          path.resolve(__dirname, '../node_modules/luna-dom-viewer'),
+          path.resolve(__dirname, '../node_modules/luna-text-viewer'),
+          path.resolve(__dirname, '../node_modules/luna-setting'),
+          path.resolve(__dirname, '../node_modules/luna-box-model'),
+          path.resolve(__dirname, '../node_modules/luna-notification'),
+        ],
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              sourceType: 'unambiguous',
+              presets: ['@babel/preset-env'],
+              plugins: [
+                '@babel/plugin-transform-runtime',
+                '@babel/plugin-proposal-class-properties',
+              ],
+            },
+          },
+        ],
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          'css-loader',
+          postcssLoader,
+          { loader: 'sass-loader', options: { api: 'modern' } },
+        ],
+      },
+      {
+        test: /\.css$/,
+        exclude: /luna-dom-highlighter/,
+        use: ['css-loader', postcssLoader],
+      },
+      {
+        test: /luna-dom-highlighter\.css$/,
+        use: [rawLoader],
+      },
+    ],
+  },
+  plugins: [
+    new webpack.BannerPlugin(banner),
+    new webpack.DefinePlugin({
+      VERSION: '"' + pkg.version + '"',
+    }),
+    new ESLintPlugin(),
+  ],
+}

build/webpack.dev.js

@@ -0,0 +1,14 @@
+const webpack = require('webpack')
+
+exports = require('./webpack.base')
+
+exports.mode = 'development'
+exports.output.filename = 'eruda.js'
+exports.devtool = 'source-map'
+exports.plugins = exports.plugins.concat([
+  new webpack.DefinePlugin({
+    ENV: '"development"',
+  }),
+])
+
+module.exports = exports

build/webpack.polyfill.js

@@ -0,0 +1,10 @@
+const path = require('path')
+
+module.exports = {
+  mode: 'production',
+  entry: './src/polyfill',
+  output: {
+    path: path.resolve(__dirname, '../dist'),
+    filename: 'eruda-polyfill.js',
+  },
+}

build/webpack.prod.js

@@ -0,0 +1,23 @@
+const webpack = require('webpack')
+const TerserPlugin = require('terser-webpack-plugin')
+
+exports = require('./webpack.base')
+
+exports.mode = 'production'
+exports.output.filename = 'eruda.js'
+exports.devtool = 'source-map'
+exports.plugins = exports.plugins.concat([
+  new webpack.DefinePlugin({
+    ENV: '"production"',
+  }),
+])
+exports.optimization = {
+  minimize: true,
+  minimizer: [
+    new TerserPlugin({
+      extractComments: false,
+    }),
+  ],
+}
+
+module.exports = exports

eruda.d.ts

@@ -0,0 +1,536 @@
+/**
+ * Type definitions for Eruda
+ * @see https://github.com/liriliri/eruda
+ */
+declare module 'eruda' {
+  export interface InitDefaults {
+    /**
+     * Transparency, 0 to 1
+     */
+    transparency?: number
+    /**
+     * Display size, 0 to 100
+     */
+    displaySize?: number
+    /**
+     * Theme, defaults to Light or Dark in dark mode
+     */
+    theme?: string
+  }
+
+  export interface InitOptions {
+    /**
+     * Container element. If not set, it will append an element directly under html root element
+     */
+    container?: HTMLElement
+    /**
+     * Choose which default tools you want, by default all will be added
+     */
+    tool?: string[]
+    /**
+     * Auto scale eruda for different viewport settings
+     */
+    autoScale?: boolean
+    /**
+     * Use shadow dom for css encapsulation
+     */
+    useShadowDom?: boolean
+    /**
+     * Enable inline mode
+     */
+    inline?: boolean
+    /**
+     * Default settings
+     */
+    defaults?: InitDefaults
+  }
+
+  export interface Position {
+    x: number
+    y: number
+  }
+
+  type AnyFn = (...args: any[]) => any
+
+  export interface Emitter {
+    on(event: string, listener: AnyFn): Emitter
+    off(event: string, listener: AnyFn): Emitter
+    once(event: string, listener: AnyFn): Emitter
+    emit(event: string, ...args: any[]): Emitter
+    removeAllListeners(event?: string): Emitter
+  }
+
+  /**
+   * Eruda Plugin
+   * @see https://eruda.liriliri.io/docs/plugin.html
+   */
+  export interface Tool {
+    /**
+     * Every plugin must have a unique name, which will be shown as the tab name on the top.
+     */
+    name: string
+    /**
+     * Called when plugin is added, and a document element used to display content is passed in.
+     * The element is wrapped as a jQuery like object, provided by the licia utility library.
+     */
+    init(el: unknown): void
+    /**
+     * Called when switch to the panel. Usually all you need to do is to show the container element.
+     */
+    show(): Tool | undefined
+    /**
+     * Called when switch to other panel. You should at least hide the container element here.
+     */
+    hide(): Tool | undefined
+    /**
+     * Called when plugin is removed using `eruda.remove('plugin name')`.
+     */
+    destroy(): void
+  }
+
+  export interface ToolConstructor {
+    new (): Tool
+    readonly prototype: Tool
+
+    extend(tool: Tool): ToolConstructor
+  }
+
+  export interface ConsoleConfig {
+    /**
+     * Asynchronous rendering
+     */
+    asyncRender?: boolean
+    /**
+     * Enable JavaScript execution
+     */
+    jsExecution?: boolean
+    /**
+     * Catch global errors
+     */
+    catchGlobalErr?: boolean
+    /**
+     * Override console
+     */
+    overrideConsole?: boolean
+    /**
+     * Display extra information
+     */
+    displayExtraInfo?: boolean
+    /**
+     * Display unenumerable properties
+     */
+    displayUnenumerable?: boolean
+    /**
+     * Access getter value
+     */
+    displayGetterVal?: boolean
+    /**
+     * Stringify object when clicked
+     */
+    lazyEvaluation?: boolean
+    /**
+     * Auto display if error occurs
+     */
+    displayIfErr?: boolean
+    /**
+     * Max log number
+     */
+    maxLogNum?: string
+  }
+
+  export interface Log {
+    type: string
+  }
+
+  export interface ErudaConsole extends Tool, Console {
+    config: {
+      set<K extends keyof ConsoleConfig>(name: K, value: ConsoleConfig[K]): void
+    }
+    /**
+     * Custom filter
+     */
+    filter(pattern: string | RegExp | ((log: Log) => boolean)): void
+    /**
+     * Html string
+     */
+    html(htmlStr: string): void
+  }
+
+  export interface ErudaConsoleConstructor {
+    new (): ErudaConsole
+    readonly prototype: ErudaConsole
+  }
+
+  export interface ElementsConfig {
+    /**
+     * Catch Event Listeners
+     */
+    overrideEventTarget?: boolean
+    /**
+     * Auto Refresh
+     */
+    observeElement?: boolean
+  }
+
+  export interface Elements extends Tool {
+    config: {
+      set<K extends keyof ElementsConfig>(
+        name: K,
+        value: ElementsConfig[K]
+      ): void
+    }
+    /**
+     * Element to display
+     */
+    select(el: HTMLElement): void
+  }
+
+  export interface ElementsConstructor {
+    new (): Elements
+    readonly prototype: Elements
+  }
+
+  export interface Network extends Tool {
+    /**
+     * Clear requests
+     */
+    clear(): void
+    /**
+     * Get request data
+     */
+    requests(): object[]
+  }
+
+  export interface NetworkConstructor {
+    new (): Network
+    readonly prototype: Network
+  }
+
+  export interface ResourcesConfig {
+    /**
+     * Hide Eruda Setting
+     */
+    hideErudaSetting?: boolean
+    /**
+     * Auto Refresh Elements
+     */
+    observeElement?: boolean
+  }
+
+  export interface Resources extends Tool {
+    config: {
+      set<K extends keyof ResourcesConfig>(
+        name: K,
+        value: ResourcesConfig[K]
+      ): void
+    }
+  }
+
+  export interface ResourcesConstructor {
+    new (): Resources
+    readonly prototype: Resources
+  }
+
+  export interface SourcesConfig {
+    /**
+     * Show Line Numbers
+     */
+    showLineNum?: boolean
+    /**
+     * Beautify Code
+     */
+    formatCode?: boolean
+    /**
+     * Indent Size
+     */
+    indentSize?: string
+  }
+
+  export interface Sources extends Tool {
+    config: {
+      set<K extends keyof SourcesConfig>(name: K, value: SourcesConfig[K]): void
+    }
+  }
+
+  export interface SourcesConstructor {
+    new (): Sources
+    readonly prototype: Sources
+  }
+
+  export interface InfoItem {
+    name: string
+    val: string
+  }
+
+  export interface Info extends Tool {
+    /**
+     * Clear infos
+     */
+    clear(): void
+    /**
+     * Add info
+     */
+    add(name: string, content: string | (() => void)): void
+    /**
+     * Get info or infos
+     */
+    get(): InfoItem[]
+    get(name: string): string
+    /**
+     * Remove specified info
+     */
+    remove(name: string): void
+  }
+
+  export interface InfoConstructor {
+    new (): Info
+    readonly prototype: Info
+  }
+
+  export interface Snippets extends Tool {
+    /**
+     * Clear snippets
+     */
+    clear(): void
+    /**
+     * Add snippet
+     * @param name Snippet name
+     * @param fn Function to be triggered
+     * @param desc Snippet description
+     */
+    add(name: string, fn: Function, desc: string): void
+    /**
+     * Remove specified snippet
+     * @param name Snippet name
+     */
+    remove(name: string): void
+    /**
+     * Run specified snippet
+     * @param name Snippet name
+     */
+    run(name: string): void
+  }
+
+  export interface SnippetsConstructor {
+    new (): Snippets
+    readonly prototype: Snippets
+  }
+
+  export interface SettingsRangeOptions {
+    min?: number
+    max?: number
+    step?: number
+  }
+
+  export interface Settings extends Tool {
+    /**
+     * Clear settings
+     */
+    clear(): void
+    /**
+     * Remove setting
+     * @param cfg Config object
+     * @param name Option name
+     */
+    remove(cfj: object, name: string): void
+    /**
+     * Add text
+     */
+    text(str: string): void
+    /**
+     * Add switch to toggle a boolean value
+     * @param cfg Config object created by util.createCfg
+     * @param name Option name
+     * @param desc Option description
+     */
+    switch(cfg: object, name: string, desc: string): void
+    /**
+     * Add select to select a number of string values
+     * @param cfg Config object
+     * @param name Option name
+     * @param desc Option description
+     * @param values Array of strings to select
+     */
+    select(cfg: object, name: string, desc: string, values: string[]): void
+    /**
+     * Add range to input a number
+     * @param cfg Config object
+     * @param name Option name
+     * @param desc Option description
+     * @param options Min, max, step
+     */
+    range(
+      cfg: object,
+      name: string,
+      desc: string,
+      options?: SettingsRangeOptions
+    ): void
+    /**
+     * Add a separator
+     */
+    separator(): void
+  }
+
+  export interface SettingsConstructor {
+    new (): Settings
+    readonly prototype: Settings
+  }
+
+  export interface EntryBtn extends Emitter {
+    show(): void
+    hide(): void
+    getPos(): Position
+    setPos(pos: Position): void
+    destroy(): void
+  }
+
+  export interface EntryBtnConstructor {
+    new (): EntryBtn
+    readonly prototype: EntryBtn
+  }
+
+  export interface DevTools extends Emitter {
+    show(): DevTools
+    hide(): DevTools
+    toggle(): void
+    add(tool: Tool | object): DevTools
+    remove(name: string): DevTools
+    removeAll(): DevTools
+    get<T extends ToolConstructor>(name: string): InstanceType<T> | undefined
+    showTool(name: string): DevTools
+    initCfg(settings: Settings): void
+    notify(content: string, options: object): void
+    destroy(): void
+  }
+
+  export interface DevToolsConstructor {
+    new (): DevTools
+    readonly prototype: DevTools
+  }
+
+  /**
+   * Eruda Util
+   * @see https://eruda.liriliri.io/docs/plugin.html#utility
+   */
+  export interface Util {
+    evalCss(css: string): HTMLStyleElement
+    isErudaEl(val: any): boolean
+    isDarkTheme(theme?: string): boolean
+    getTheme(): string
+  }
+
+  interface IToolNameMap {
+    console: InstanceType<ErudaConsoleConstructor>
+    elements: InstanceType<ElementsConstructor>
+    info: InstanceType<InfoConstructor>
+    network: InstanceType<NetworkConstructor>
+    resources: InstanceType<ResourcesConstructor>
+    settings: InstanceType<SettingsConstructor>
+    snippets: InstanceType<SnippetsConstructor>
+    sources: InstanceType<SourcesConstructor>
+    entryBtn: InstanceType<EntryBtnConstructor>
+  }
+
+  /**
+   * Eruda APIs
+   * @see https://eruda.liriliri.io/docs/api.html
+   */
+  export interface ErudaApis {
+    /**
+     * Initialize eruda.
+     */
+    init(options?: InitOptions): void
+    /**
+     * Destory eruda.
+     * Note: You can call `init` method again after destruction.
+     */
+    destroy(): void
+    /**
+     * Set or get scale.
+     */
+    scale(): number
+    scale(s: number): Eruda
+    /**
+     * Set or get entry button position.
+     * It will not take effect if given pos is out of range.
+     */
+    position(): Position
+    position(p: Position): Eruda
+    /**
+     * Get tool, eg. console, elements panels.
+     */
+    get<K extends keyof IToolNameMap>(name: K): IToolNameMap[K]
+    get<T extends ToolConstructor>(name: string): InstanceType<T> | undefined
+    get(): InstanceType<DevToolsConstructor>
+    /**
+     * Add tool.
+     */
+    add<T extends ToolConstructor>(
+      tool: InstanceType<T> | ((eruda: Eruda) => InstanceType<T>)
+    ): Eruda | undefined
+    /**
+     * Remove tool.
+     */
+    remove(name: string): Eruda | undefined
+    /**
+     * Show eruda panel.
+     */
+    show(name?: string): Eruda | undefined
+    /**
+     * Hide eruda panel.
+     */
+    hide(): Eruda | undefined
+  }
+
+  export interface Eruda extends ErudaApis {
+    /**
+     * Display console logs. Implementation detail follows the console api spec.
+     */
+    Console: ErudaConsoleConstructor
+    /**
+     * Check dom element status.
+     */
+    Elements: ElementsConstructor
+    /**
+     * Display special information, could be used for displaying user info to track user logs.
+     * By default, page url and browser user agent is shown.
+     */
+    Info: InfoConstructor
+    /**
+     * Display requests.
+     */
+    Network: NetworkConstructor
+    /**
+     * LocalStorage, sessionStorage, cookies, scripts, styleSheets and images.
+     */
+    Resources: ResourcesConstructor
+    /**
+     * Customization for all tools.
+     */
+    Settings: SettingsConstructor
+    /**
+     * Allow you to register small functions that can be triggered multiple times.
+     */
+    Snippets: SnippetsConstructor
+    /**
+     * View object, html, js, and css.
+     */
+    Sources: SourcesConstructor
+    /**
+     * Eruda Tool
+     */
+    Tool: ToolConstructor
+    /**
+     * Eruda Util
+     */
+    util: Util
+    /**
+     * Eruda version
+     */
+    readonly version: string
+  }
+
+  const eruda: Eruda
+
+  export default eruda
+}

eslint.config.mjs

@@ -0,0 +1,34 @@
+import babelEslintParser from '@babel/eslint-parser'
+import eslintJs from '@eslint/js'
+import globals from 'globals'
+
+export default [
+  eslintJs.configs.recommended,
+  {
+    languageOptions: {
+      parser: babelEslintParser,
+      parserOptions: {
+        requireConfigFile: false,
+        babelOptions: {
+          babelrc: false,
+          configFile: false,
+        },
+      },
+      globals: {
+        ...globals.builtin,
+        ...globals.browser,
+        ...globals.commonjs,
+        VERSION: true,
+        ENV: true,
+      },
+    },
+    rules: {
+      quotes: ['error', 'single', { 'avoidEscape': true, 'allowTemplateLiterals': false }],
+      'prefer-const': 2,
+    },
+  },
+  {files: ['build/**/*.js'], languageOptions:{globals: {...globals.node}}},
+  {
+    ignores: ['test','dist','coverage'],
+  }
+]

karma.conf.js

@@ -0,0 +1,61 @@
+const webpackCfg = require('./build/webpack.dev')
+webpackCfg.devtool = 'inline-source-map'
+webpackCfg.module.rules.push({
+  test: /\.js$/,
+  exclude: /node_modules|lib\/util\.js/,
+  loader: '@jsdevtools/coverage-istanbul-loader',
+  enforce: 'post',
+  options: {
+    esModules: true,
+  },
+})
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jquery-1.8.3'],
+    files: [
+      'src/index.js',
+      'test/init.js',
+      'node_modules/jasmine-core/lib/jasmine-core/jasmine.js',
+      'node_modules/karma-jasmine/lib/boot.js',
+      'node_modules/karma-jasmine/lib/adapter.js',
+      'node_modules/jasmine-jquery/lib/jasmine-jquery.js',
+      'test/util.js',
+      'test/console.js',
+      'test/elements.js',
+      'test/info.js',
+      'test/network.js',
+      'test/resources.js',
+      'test/snippets.js',
+      'test/sources.js',
+      'test/settings.js',
+      'test/eruda.js',
+    ],
+    plugins: [
+      'karma-jasmine',
+      'karma-jquery',
+      'karma-chrome-launcher',
+      'karma-webpack',
+      'karma-sourcemap-loader',
+      'karma-coverage-istanbul-reporter',
+    ],
+    webpackServer: {
+      noInfo: true,
+    },
+    preprocessors: {
+      'src/index.js': ['webpack', 'sourcemap'],
+    },
+    webpack: webpackCfg,
+    coverageIstanbulReporter: {
+      reports: ['html', 'lcovonly', 'text', 'text-summary'],
+    },
+    reporters: ['progress', 'coverage-istanbul'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    browsers: ['ChromeHeadless'],
+    singleRun: true,
+    concurrency: Infinity,
+  })
+}

package.json

@@ -0,0 +1,88 @@
+{
+  "name": "eruda",
+  "version": "3.4.1",
+  "description": "Console for Mobile Browsers",
+  "main": "eruda.js",
+  "browserslist": [
+    "since 2015",
+    "not dead"
+  ],
+  "scripts": {
+    "ci": "npm run lint && npm run test && npm run build && npm run es5",
+    "build": "lsla shx rm -rf dist && webpack --config build/webpack.prod.js && webpack --config build/webpack.polyfill.js && node build/build && lsla shx cp README.md eruda.d.ts dist",
+    "build:analyser": "webpack --config build/webpack.analyser.js",
+    "dev": "webpack-dev-server --config build/webpack.dev.js --host 0.0.0.0",
+    "test": "karma start",
+    "format": "lsla prettier \"*.{js,ts}\" \"src/**/*.{js,scss,css}\" \"build/*.js\" \"test/*.{js,html}\" --write",
+    "lint": "eslint .",
+    "lint:fix": "npm run lint -- --fix",
+    "es5": "es-check es5 dist/eruda.js dist/eruda-polyfill.js",
+    "setup": "lsla shx mkdir -p test/lib && lsla shx cp node_modules/jasmine-core/lib/jasmine-core/{jasmine.css,jasmine.js,jasmine-html.js,boot.js} test/lib && lsla shx cp node_modules/jasmine-jquery/lib/jasmine-jquery.js test/lib && lsla shx cp node_modules/jquery/dist/jquery.js test/lib",
+    "genIcon": "lsla genIcon --input src/style/icon --output src/style/icon.css --name eruda-icon && lsla prettier src/**/*.css --write"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/liriliri/eruda.git"
+  },
+  "keywords": [
+    "console",
+    "mobile",
+    "debug"
+  ],
+  "author": "redhoodsu",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/liriliri/eruda/issues"
+  },
+  "homepage": "https://eruda.liriliri.io/",
+  "devDependencies": {
+    "@babel/core": "^7.18.6",
+    "@babel/eslint-parser": "^7.26.10",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-transform-runtime": "^7.18.6",
+    "@babel/preset-env": "^7.18.6",
+    "@babel/runtime": "^7.18.6",
+    "@eslint/js": "^9.22.0",
+    "@jsdevtools/coverage-istanbul-loader": "^3.0.5",
+    "autoprefixer": "^9.7.4",
+    "babel-loader": "^8.2.5",
+    "chobitsu": "^1.8.4",
+    "core-js": "^3.37.1",
+    "css-loader": "^3.4.2",
+    "es-check": "^6.2.1",
+    "eslint": "^9.22.0",
+    "eslint-webpack-plugin": "^5.0.0",
+    "globals": "^16.0.0",
+    "jasmine-core": "^2.99.1",
+    "jasmine-jquery": "^2.1.1",
+    "jquery": "^3.4.1",
+    "karma": "^6.4.0",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-coverage-istanbul-reporter": "^2.1.1",
+    "karma-jasmine": "^1.1.2",
+    "karma-jquery": "^0.2.4",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "^5.0.0",
+    "licia": "^1.44.0",
+    "luna-box-model": "^1.0.0",
+    "luna-console": "^1.3.6",
+    "luna-data-grid": "^1.4.2",
+    "luna-dom-viewer": "^1.8.3",
+    "luna-modal": "^1.3.1",
+    "luna-notification": "^0.3.3",
+    "luna-object-viewer": "^0.3.2",
+    "luna-setting": "^2.0.2",
+    "luna-tab": "^0.3.4",
+    "luna-text-viewer": "^0.2.1",
+    "postcss-clean": "^1.2.2",
+    "postcss-loader": "^3.0.0",
+    "postcss-prefixer": "^2.1.3",
+    "raw-loader": "^4.0.2",
+    "sass": "^1.77.6",
+    "sass-loader": "^14.2.1",
+    "webpack": "^5.92.1",
+    "webpack-bundle-analyzer": "^4.7.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4"
+  }
+}

src/Console/Console.js

@@ -0,0 +1,399 @@
+import Tool from '../DevTools/Tool'
+import noop from 'licia/noop'
+import $ from 'licia/$'
+import toStr from 'licia/toStr'
+import isFn from 'licia/isFn'
+import Emitter from 'licia/Emitter'
+import isStr from 'licia/isStr'
+import isRegExp from 'licia/isRegExp'
+import uncaught from 'licia/uncaught'
+import trim from 'licia/trim'
+import upperFirst from 'licia/upperFirst'
+import isHidden from 'licia/isHidden'
+import isNull from 'licia/isNull'
+import isArr from 'licia/isArr'
+import extend from 'licia/extend'
+import evalCss from '../lib/evalCss'
+import Settings from '../Settings/Settings'
+import LunaConsole from 'luna-console'
+import LunaModal from 'luna-modal'
+import { classPrefix as c } from '../lib/util'
+
+uncaught.start()
+
+export default class Console extends Tool {
+  constructor({ name = 'console' } = {}) {
+    super()
+
+    Emitter.mixin(this)
+
+    this.name = name
+    this._selectedLog = null
+  }
+  init($el, container) {
+    super.init($el)
+    this._container = container
+
+    this._appendTpl()
+
+    this._initCfg()
+
+    this._initLogger()
+    this._exposeLogger()
+    this._bindEvent()
+  }
+  show() {
+    super.show()
+    this._handleShow()
+  }
+  overrideConsole() {
+    const origConsole = (this._origConsole = {})
+    const winConsole = window.console
+
+    CONSOLE_METHOD.forEach((name) => {
+      let origin = (origConsole[name] = noop)
+      if (winConsole[name]) {
+        origin = origConsole[name] = winConsole[name].bind(winConsole)
+      }
+
+      winConsole[name] = (...args) => {
+        this[name](...args)
+        origin(...args)
+      }
+    })
+
+    return this
+  }
+  setGlobal(name, val) {
+    this._logger.setGlobal(name, val)
+  }
+  restoreConsole() {
+    if (!this._origConsole) return this
+
+    CONSOLE_METHOD.forEach(
+      (name) => (window.console[name] = this._origConsole[name])
+    )
+    delete this._origConsole
+
+    return this
+  }
+  catchGlobalErr() {
+    uncaught.addListener(this._handleErr)
+
+    return this
+  }
+  ignoreGlobalErr() {
+    uncaught.rmListener(this._handleErr)
+
+    return this
+  }
+  filter(filter) {
+    const $filterText = this._$filterText
+    const logger = this._logger
+
+    if (isStr(filter)) {
+      $filterText.text(filter)
+      logger.setOption('filter', trim(filter))
+    } else if (isRegExp(filter)) {
+      $filterText.text(toStr(filter))
+      logger.setOption('filter', filter)
+    } else if (isFn(filter)) {
+      $filterText.text('ƒ')
+      logger.setOption('filter', filter)
+    }
+  }
+  destroy() {
+    this._logger.destroy()
+    super.destroy()
+
+    this._container.off('show', this._handleShow)
+
+    if (this._style) {
+      evalCss.remove(this._style)
+    }
+    this.ignoreGlobalErr()
+    this.restoreConsole()
+    this._rmCfg()
+  }
+  _handleShow = () => {
+    if (isHidden(this._$el.get(0))) return
+    this._logger.renderViewport()
+  }
+  _handleErr = (err) => {
+    this._logger.error(err)
+  }
+  _enableJsExecution(enabled) {
+    const $el = this._$el
+    const $jsInput = $el.find(c('.js-input'))
+
+    if (enabled) {
+      $jsInput.show()
+      $el.rmClass(c('js-input-hidden'))
+    } else {
+      $jsInput.hide()
+      $el.addClass(c('js-input-hidden'))
+    }
+  }
+  _appendTpl() {
+    const $el = this._$el
+
+    this._style = evalCss(require('./Console.scss'))
+    $el.append(
+      c(`
+      <div class="control">
+        <span class="icon-clear clear-console"></span>
+        <span class="level active" data-level="all">All</span>
+        <span class="level" data-level="info">Info</span>
+        <span class="level" data-level="warning">Warning</span>
+        <span class="level" data-level="error">Error</span>
+        <span class="filter-text"></span>
+        <span class="icon-filter filter"></span>
+        <span class="icon-copy icon-disabled copy"></span>
+      </div>
+      <div class="logs-container"></div>
+      <div class="js-input">
+        <div class="buttons">
+          <div class="button cancel">Cancel</div>
+          <div class="button execute">Execute</div>
+        </div>
+        <span class="icon-arrow-right"></span>
+        <textarea></textarea>
+      </div>
+    `)
+    )
+
+    const _$inputContainer = $el.find(c('.js-input'))
+    const _$input = _$inputContainer.find('textarea')
+    const _$inputBtns = _$inputContainer.find(c('.buttons'))
+
+    extend(this, {
+      _$control: $el.find(c('.control')),
+      _$logs: $el.find(c('.logs-container')),
+      _$inputContainer,
+      _$input,
+      _$inputBtns,
+      _$filterText: $el.find(c('.filter-text')),
+    })
+  }
+  _initLogger() {
+    const cfg = this.config
+    let maxLogNum = cfg.get('maxLogNum')
+    maxLogNum = maxLogNum === 'infinite' ? 0 : +maxLogNum
+
+    const $level = this._$control.find(c('.level'))
+    const logger = new LunaConsole(this._$logs.get(0), {
+      asyncRender: cfg.get('asyncRender'),
+      maxNum: maxLogNum,
+      showHeader: cfg.get('displayExtraInfo'),
+      unenumerable: cfg.get('displayUnenumerable'),
+      accessGetter: cfg.get('displayGetterVal'),
+      lazyEvaluation: cfg.get('lazyEvaluation'),
+    })
+
+    logger.on('optionChange', (name, val) => {
+      switch (name) {
+        case 'level':
+          $level.each(function () {
+            const $this = $(this)
+            const level = $this.data('level')
+            const isMatch = level === val || (level === 'all' && isArr(val))
+
+            $this[isMatch ? 'addClass' : 'rmClass'](c('active'))
+          })
+          break
+      }
+    })
+
+    if (cfg.get('overrideConsole')) this.overrideConsole()
+
+    this._logger = logger
+  }
+  _exposeLogger() {
+    const logger = this._logger
+    const methods = ['html'].concat(CONSOLE_METHOD)
+
+    methods.forEach(
+      (name) =>
+        (this[name] = (...args) => {
+          logger[name](...args)
+          this.emit(name, ...args)
+
+          return this
+        })
+    )
+  }
+  _bindEvent() {
+    const container = this._container
+    const $input = this._$input
+    const $inputBtns = this._$inputBtns
+    const $control = this._$control
+
+    const logger = this._logger
+    const config = this.config
+
+    $control
+      .on('click', c('.clear-console'), () => logger.clear(true))
+      .on('click', c('.level'), function () {
+        let level = $(this).data('level')
+        if (level === 'all') {
+          level = ['verbose', 'info', 'warning', 'error']
+        }
+        logger.setOption('level', level)
+      })
+      .on('click', c('.filter'), () => {
+        LunaModal.prompt('Filter').then((filter) => {
+          if (isNull(filter)) return
+          this.filter(filter)
+        })
+      })
+      .on('click', c('.copy'), () => {
+        this._selectedLog.copy()
+        container.notify('Copied', { icon: 'success' })
+      })
+
+    $inputBtns
+      .on('click', c('.cancel'), () => this._hideInput())
+      .on('click', c('.execute'), () => {
+        const jsInput = $input.val().trim()
+        if (jsInput === '') return
+
+        logger.evaluate(jsInput)
+        $input.val('').get(0).blur()
+        this._hideInput()
+      })
+
+    $input.on('focusin', () => this._showInput())
+
+    logger.on('insert', (log) => {
+      const autoShow = log.type === 'error' && config.get('displayIfErr')
+
+      if (autoShow) container.showTool('console').show()
+    })
+
+    logger.on('select', (log) => {
+      this._selectedLog = log
+      $control.find(c('.icon-copy')).rmClass(c('icon-disabled'))
+    })
+
+    logger.on('deselect', () => {
+      this._selectedLog = null
+      $control.find(c('.icon-copy')).addClass(c('icon-disabled'))
+    })
+
+    container.on('show', this._handleShow)
+  }
+  _hideInput() {
+    this._$inputContainer.rmClass(c('active'))
+    this._$inputBtns.css('display', 'none')
+  }
+  _showInput() {
+    this._$inputContainer.addClass(c('active'))
+    this._$inputBtns.css('display', 'flex')
+  }
+  _rmCfg() {
+    const cfg = this.config
+
+    const settings = this._container.get('settings')
+    if (!settings) return
+
+    settings
+      .remove(cfg, 'asyncRender')
+      .remove(cfg, 'jsExecution')
+      .remove(cfg, 'catchGlobalErr')
+      .remove(cfg, 'overrideConsole')
+      .remove(cfg, 'displayExtraInfo')
+      .remove(cfg, 'displayUnenumerable')
+      .remove(cfg, 'displayGetterVal')
+      .remove(cfg, 'lazyEvaluation')
+      .remove(cfg, 'displayIfErr')
+      .remove(cfg, 'maxLogNum')
+      .remove(upperFirst(this.name))
+  }
+  _initCfg() {
+    const container = this._container
+
+    const cfg = (this.config = Settings.createCfg(this.name, {
+      asyncRender: true,
+      catchGlobalErr: true,
+      jsExecution: true,
+      overrideConsole: true,
+      displayExtraInfo: false,
+      displayUnenumerable: true,
+      displayGetterVal: true,
+      lazyEvaluation: true,
+      displayIfErr: false,
+      maxLogNum: 'infinite',
+    }))
+
+    this._enableJsExecution(cfg.get('jsExecution'))
+    if (cfg.get('catchGlobalErr')) this.catchGlobalErr()
+
+    cfg.on('change', (key, val) => {
+      const logger = this._logger
+      switch (key) {
+        case 'asyncRender':
+          return logger.setOption('asyncRender', val)
+        case 'jsExecution':
+          return this._enableJsExecution(val)
+        case 'catchGlobalErr':
+          return val ? this.catchGlobalErr() : this.ignoreGlobalErr()
+        case 'overrideConsole':
+          return val ? this.overrideConsole() : this.restoreConsole()
+        case 'maxLogNum':
+          return logger.setOption('maxNum', val === 'infinite' ? 0 : +val)
+        case 'displayExtraInfo':
+          return logger.setOption('showHeader', val)
+        case 'displayUnenumerable':
+          return logger.setOption('unenumerable', val)
+        case 'displayGetterVal':
+          return logger.setOption('accessGetter', val)
+        case 'lazyEvaluation':
+          return logger.setOption('lazyEvaluation', val)
+      }
+    })
+
+    const settings = container.get('settings')
+    if (!settings) return
+
+    settings
+      .text(upperFirst(this.name))
+      .switch(cfg, 'asyncRender', 'Asynchronous Rendering')
+      .switch(cfg, 'jsExecution', 'Enable JavaScript Execution')
+      .switch(cfg, 'catchGlobalErr', 'Catch Global Errors')
+      .switch(cfg, 'overrideConsole', 'Override Console')
+      .switch(cfg, 'displayIfErr', 'Auto Display If Error Occurs')
+      .switch(cfg, 'displayExtraInfo', 'Display Extra Information')
+      .switch(cfg, 'displayUnenumerable', 'Display Unenumerable Properties')
+      .switch(cfg, 'displayGetterVal', 'Access Getter Value')
+      .switch(cfg, 'lazyEvaluation', 'Lazy Evaluation')
+      .select(cfg, 'maxLogNum', 'Max Log Number', [
+        'infinite',
+        '250',
+        '125',
+        '100',
+        '50',
+        '10',
+      ])
+      .separator()
+  }
+}
+
+const CONSOLE_METHOD = [
+  'log',
+  'error',
+  'info',
+  'warn',
+  'dir',
+  'time',
+  'timeLog',
+  'timeEnd',
+  'clear',
+  'table',
+  'assert',
+  'count',
+  'countReset',
+  'debug',
+  'group',
+  'groupCollapsed',
+  'groupEnd',
+]

src/Console/Console.scss

@@ -0,0 +1,145 @@
+@use '../style/variable' as *;
+@use '../style/mixin' as *;
+
+#console {
+  padding-top: 40px;
+  padding-bottom: 24px;
+  width: 100%;
+  height: 100%;
+  &.js-input-hidden {
+    padding-bottom: 0;
+  }
+  .control {
+    padding: 10px 10px 10px 35px;
+    @include control();
+    .icon-clear {
+      padding-right: 0px;
+      left: 0;
+    }
+    .icon-copy {
+      right: 0;
+    }
+    .icon-filter {
+      right: 23px;
+    }
+    .level {
+      cursor: pointer;
+      font-size: $font-size-s;
+      height: 20px;
+      display: inline-block;
+      margin: 0 2px;
+      padding: 0 4px;
+      line-height: 20px;
+      transition: background-color $anim-duration, color $anim-duration;
+      &.active {
+        background: var(--highlight);
+        color: var(--select-foreground);
+      }
+    }
+    .filter-text {
+      white-space: nowrap;
+      position: absolute;
+      line-height: 20px;
+      max-width: 80px;
+      overflow: hidden;
+      right: 55px;
+      font-size: $font-size;
+      text-overflow: ellipsis;
+    }
+  }
+  .js-input {
+    pointer-events: none;
+    position: absolute;
+    z-index: 100;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    border-top: 1px solid var(--border);
+    height: 24px;
+    .icon-arrow-right {
+      line-height: 23px;
+      color: var(--accent);
+      position: absolute;
+      left: 10px;
+      top: 0;
+      z-index: 10;
+    }
+    &.active {
+      height: 100%;
+      padding-top: 40px;
+      padding-bottom: 40px;
+      border-top: none;
+      .icon-arrow-right {
+        display: none;
+      }
+      textarea {
+        overflow: auto;
+        padding-left: 10px;
+      }
+    }
+    .buttons {
+      display: none;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      height: 40px;
+      color: var(--primary);
+      background: var(--darker-background);
+      font-size: $font-size-s;
+      border-top: 1px solid var(--border);
+      .button {
+        pointer-events: all;
+        cursor: pointer;
+        flex: 1;
+        text-align: center;
+        border-right: 1px solid var(--border);
+        height: 40px;
+        line-height: 40px;
+        transition: background-color $anim-duration, color $anim-duration;
+        &:last-child {
+          border-right: none;
+        }
+        &:active {
+          color: var(--select-foreground);
+          background: var(--highlight);
+        }
+      }
+    }
+    textarea {
+      overflow: hidden;
+      pointer-events: all;
+      padding: 3px 10px;
+      padding-left: 25px;
+      outline: none;
+      border: none;
+      font-size: $font-size;
+      width: 100%;
+      height: 100%;
+      user-select: text;
+      resize: none;
+      color: var(--primary);
+      background: var(--background);
+    }
+  }
+}
+
+.safe-area #console {
+  @include safe-area(padding-bottom, 24px);
+  &.js-input-hidden {
+    padding-bottom: 0;
+  }
+  .js-input {
+    @include safe-area(height, 24px);
+    &.active {
+      height: 100%;
+      @include safe-area(padding-bottom, 40px);
+    }
+    .buttons {
+      @include safe-area(height, 40px);
+      .button {
+        @include safe-area(height, 40px);
+      }
+    }
+  }
+}

src/DevTools/DevTools.js

@@ -0,0 +1,408 @@
+import logger from '../lib/logger'
+import Tool from './Tool'
+import Settings from '../Settings/Settings'
+import Emitter from 'licia/Emitter'
+import defaults from 'licia/defaults'
+import keys from 'licia/keys'
+import last from 'licia/last'
+import each from 'licia/each'
+import isNum from 'licia/isNum'
+import nextTick from 'licia/nextTick'
+import $ from 'licia/$'
+import toNum from 'licia/toNum'
+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'
+import evalCss from '../lib/evalCss'
+import emitter from '../lib/emitter'
+import { isDarkTheme } from '../lib/themes'
+import LunaNotification from 'luna-notification'
+import LunaModal from 'luna-modal'
+import LunaTab from 'luna-tab'
+import {
+  classPrefix as c,
+  eventClient,
+  hasSafeArea,
+  safeStorage,
+} from '../lib/util'
+
+export default class DevTools extends Emitter {
+  constructor($container, { defaults = {}, inline = false } = {}) {
+    super()
+
+    this._defCfg = extend(
+      {
+        transparency: 1,
+        displaySize: 80,
+        theme: 'System preference',
+      },
+      defaults
+    )
+
+    this._style = evalCss(require('./DevTools.scss'))
+
+    this.$container = $container
+    this._isShow = false
+    this._opacity = 1
+    this._tools = {}
+    this._isResizing = false
+    this._resizeTimer = null
+    this._resizeStartY = 0
+    this._resizeStartSize = 0
+    this._inline = inline
+
+    this._initTpl()
+    this._initTab()
+    this._initNotification()
+    this._initModal()
+
+    ready(() => this._checkSafeArea())
+    this._bindEvent()
+  }
+  show() {
+    this._isShow = true
+
+    this._$el.show()
+    this._tab.updateSlider()
+
+    // Need a delay after show to enable transition effect.
+    setTimeout(() => {
+      this._$el.css('opacity', this._opacity)
+    }, 50)
+
+    this.emit('show')
+
+    return this
+  }
+  hide() {
+    if (this._inline) {
+      return
+    }
+
+    this._isShow = false
+    this.emit('hide')
+
+    this._$el.css({ opacity: 0 })
+    setTimeout(() => this._$el.hide(), 300)
+
+    return this
+  }
+  toggle() {
+    return this._isShow ? this.hide() : this.show()
+  }
+  add(tool) {
+    const tab = this._tab
+
+    if (!(tool instanceof Tool)) {
+      const { init, show, hide, destroy } = new Tool()
+      defaults(tool, { init, show, hide, destroy })
+    }
+
+    const name = tool.name
+    if (!name) {
+      return logger.error('You must specify a name for a tool')
+    }
+
+    if (this._tools[name]) {
+      return logger.warn(`Tool ${name} already exists`)
+    }
+
+    const id = name.replace(/\s+/g, '-')
+    this._$tools.prepend(`<div id="${c(id)}" class="${c(id + ' tool')}"></div>`)
+    tool.init(this._$tools.find(`.${c(id)}.${c('tool')}`), this)
+    tool.active = false
+    this._tools[name] = tool
+
+    if (name === 'settings') {
+      tab.append({
+        id: name,
+        title: name,
+      })
+    } else {
+      tab.insert(tab.length - 1, {
+        id: name,
+        title: name,
+      })
+    }
+
+    return this
+  }
+  remove(name) {
+    const tools = this._tools
+
+    if (!tools[name]) return logger.warn(`Tool ${name} doesn't exist`)
+
+    this._tab.remove(name)
+
+    const tool = tools[name]
+    delete tools[name]
+    if (tool.active) {
+      const toolKeys = keys(tools)
+      if (toolKeys.length > 0) this.showTool(tools[last(toolKeys)].name)
+    }
+    tool.destroy()
+
+    return this
+  }
+  removeAll() {
+    each(this._tools, (tool) => this.remove(tool.name))
+
+    return this
+  }
+  get(name) {
+    const tool = this._tools[name]
+
+    if (tool) return tool
+  }
+  showTool(name) {
+    if (this._curTool === name) {
+      return this
+    }
+    this._curTool = name
+
+    const tools = this._tools
+
+    const tool = tools[name]
+    if (!tool) return
+
+    let lastTool = {}
+
+    each(tools, (tool) => {
+      if (tool.active) {
+        lastTool = tool
+        tool.active = false
+        tool.hide()
+      }
+    })
+
+    tool.active = true
+    tool.show()
+
+    this._tab.select(name)
+
+    this.emit('showTool', name, lastTool)
+
+    return this
+  }
+  initCfg(settings) {
+    const cfg = (this.config = Settings.createCfg('dev-tools', this._defCfg))
+
+    this._setTransparency(cfg.get('transparency'))
+    this._setDisplaySize(cfg.get('displaySize'))
+    this._setTheme(cfg.get('theme'))
+
+    cfg.on('change', (key, val) => {
+      switch (key) {
+        case 'transparency':
+          return this._setTransparency(val)
+        case 'displaySize':
+          return this._setDisplaySize(val)
+        case 'theme':
+          return this._setTheme(val)
+      }
+    })
+
+    settings
+      .separator()
+      .select(cfg, 'theme', 'Theme', [
+        'System preference',
+        ...keys(evalCss.getThemes()),
+      ])
+
+    if (!this._inline) {
+      settings
+        .range(cfg, 'transparency', 'Transparency', {
+          min: 0.2,
+          max: 1,
+          step: 0.01,
+        })
+        .range(cfg, 'displaySize', 'Display Size', {
+          min: 40,
+          max: 100,
+          step: 1,
+        })
+    }
+
+    settings
+      .button('Restore defaults and reload', function () {
+        const store = safeStorage('local')
+
+        const data = JSON.parse(JSON.stringify(store))
+        each(data, (val, key) => {
+          if (!isStr(val)) {
+            return
+          }
+
+          if (startWith(key, 'eruda')) {
+            store.removeItem(key)
+          }
+        })
+
+        window.location.reload()
+      })
+      .separator()
+  }
+  notify(content, options) {
+    this._notification.notify(content, options)
+  }
+  destroy() {
+    evalCss.remove(this._style)
+    this.removeAll()
+    this._tab.destroy()
+    this._$el.remove()
+    window.removeEventListener('resize', this._checkSafeArea)
+    emitter.off(emitter.SCALE, this._updateTabHeight)
+  }
+  _checkSafeArea = () => {
+    const { $container } = this
+
+    if (hasSafeArea()) {
+      $container.addClass(c('safe-area'))
+    } else {
+      $container.rmClass(c('safe-area'))
+    }
+  }
+  _setTheme(t) {
+    const { $container } = this
+
+    if (t === 'System preference') {
+      t = upperFirst(theme.get())
+    }
+
+    if (isDarkTheme(t)) {
+      $container.addClass(c('dark'))
+    } else {
+      $container.rmClass(c('dark'))
+    }
+    evalCss.setTheme(t)
+  }
+  _setTransparency(opacity) {
+    if (!isNum(opacity)) return
+
+    this._opacity = opacity
+    if (this._isShow) this._$el.css({ opacity })
+  }
+  _setDisplaySize(height) {
+    if (this._inline) {
+      height = 100
+    }
+
+    if (!isNum(height)) return
+
+    this._$el.css({ height: height + '%' })
+  }
+  _initTpl() {
+    const $container = this.$container
+
+    $container.append(
+      c(`
+      <div class="dev-tools">
+        <div class="resizer"></div>
+        <div class="tab"></div>
+        <div class="tools"></div>
+        <div class="notification"></div>
+        <div class="modal"></div>
+      </div>
+      `)
+    )
+
+    this._$el = $container.find(c('.dev-tools'))
+    this._$tools = this._$el.find(c('.tools'))
+  }
+  _initTab() {
+    this._tab = new LunaTab(this._$el.find(c('.tab')).get(0), {
+      height: 40,
+    })
+    this._tab.on('select', (id) => this.showTool(id))
+  }
+  _updateTabHeight = (scale) => {
+    this._tab.setOption('height', 40 * scale)
+    nextTick(() => {
+      this._tab.updateSlider()
+    })
+  }
+  _initNotification() {
+    this._notification = new LunaNotification(
+      this._$el.find(c('.notification')).get(0),
+      {
+        position: {
+          x: 'center',
+          y: 'top',
+        },
+      }
+    )
+  }
+  _initModal() {
+    LunaModal.setContainer(this._$el.find(c('.modal')).get(0))
+  }
+  _bindEvent() {
+    const $resizer = this._$el.find(c('.resizer'))
+    const $navBar = this._$el.find(c('.nav-bar'))
+    const $document = $(document)
+
+    if (this._inline) {
+      $resizer.hide()
+    }
+
+    const startListener = (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+
+      e = e.origEvent
+      this._isResizing = true
+      this._resizeStartSize = this.config.get('displaySize')
+      this._resizeStartY = eventClient('y', e)
+
+      $resizer.css('height', '100%')
+
+      $document.on(pointerEvent('move'), moveListener)
+      $document.on(pointerEvent('up'), endListener)
+    }
+    const moveListener = (e) => {
+      if (!this._isResizing) {
+        return
+      }
+      e.preventDefault()
+      e.stopPropagation()
+
+      e = e.origEvent
+      const deltaY =
+        ((this._resizeStartY - eventClient('y', e)) / window.innerHeight) * 100
+      let displaySize = this._resizeStartSize + deltaY
+      if (displaySize < 40) {
+        displaySize = 40
+      } else if (displaySize > 100) {
+        displaySize = 100
+      }
+      this.config.set('displaySize', toNum(displaySize.toFixed(2)))
+    }
+    const endListener = () => {
+      clearTimeout(this._resizeTimer)
+      this._isResizing = false
+
+      $resizer.css('height', 10)
+
+      $document.off(pointerEvent('move'), moveListener)
+      $document.off(pointerEvent('up'), endListener)
+    }
+    $resizer.css('height', 10)
+    $resizer.on(pointerEvent('down'), startListener)
+
+    $navBar.on('contextmenu', (e) => e.preventDefault())
+    this.$container.on('click', (e) => e.stopPropagation())
+    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/DevTools/DevTools.scss

@@ -0,0 +1,37 @@
+@use '../style/variable' as *;
+@use '../style/mixin' as *;
+
+.dev-tools {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  bottom: 0;
+  background: var(--background);
+  z-index: 500;
+  display: none;
+  padding-top: 40px !important;
+  opacity: 0;
+  transition: opacity $anim-duration;
+  border-top: 1px solid var(--border);
+  .resizer {
+    position: absolute;
+    width: 100%;
+    touch-action: none;
+    left: 0;
+    top: -8px;
+    cursor: row-resize;
+    z-index: 120;
+  }
+  .tools {
+    @include overflow-auto();
+    height: 100%;
+    width: 100%;
+    position: relative;
+    .tool {
+      @include absolute();
+      overflow: hidden;
+      display: none;
+    }
+  }
+}

src/DevTools/Tool.js

@@ -0,0 +1,20 @@
+import Class from 'licia/Class'
+
+export default Class({
+  init($el) {
+    this._$el = $el
+  },
+  show() {
+    this._$el.show()
+
+    return this
+  },
+  hide() {
+    this._$el.hide()
+
+    return this
+  },
+  destroy() {
+    this._$el.remove()
+  },
+})

src/Elements/CssStore.js

@@ -0,0 +1,112 @@
+import each from 'licia/each'
+import sortKeys from 'licia/sortKeys'
+
+function formatStyle(style) {
+  const ret = {}
+
+  for (let i = 0, len = style.length; i < len; i++) {
+    const name = style[i]
+
+    if (style[name] === 'initial') continue
+
+    ret[name] = style[name]
+  }
+
+  return sortStyleKeys(ret)
+}
+
+const elProto = Element.prototype
+
+let matchesSel = function () {
+  return false
+}
+
+if (elProto.webkitMatchesSelector) {
+  matchesSel = (el, selText) => el.webkitMatchesSelector(selText)
+} else if (elProto.mozMatchesSelector) {
+  matchesSel = (el, selText) => el.mozMatchesSelector(selText)
+}
+
+export default class CssStore {
+  constructor(el) {
+    this._el = el
+  }
+  getComputedStyle() {
+    const computedStyle = window.getComputedStyle(this._el)
+
+    return formatStyle(computedStyle)
+  }
+  getMatchedCSSRules() {
+    const ret = []
+
+    each(document.styleSheets, (styleSheet) => {
+      try {
+        // Started with version 64, Chrome does not allow cross origin script to access this property.
+        if (!styleSheet.cssRules) return
+      } catch {
+        return
+      }
+
+      each(styleSheet.cssRules, (cssRule) => {
+        let matchesEl = false
+
+        // Mobile safari will throw DOM Exception 12 error, need to try catch it.
+        try {
+          matchesEl = this._elMatchesSel(cssRule.selectorText)
+        } catch {
+          // No op
+        }
+
+        if (!matchesEl) return
+
+        ret.push({
+          selectorText: cssRule.selectorText,
+          style: formatStyle(cssRule.style),
+        })
+      })
+    })
+
+    return ret
+  }
+  _elMatchesSel(selText) {
+    return matchesSel(this._el, selText)
+  }
+}
+
+function sortStyleKeys(style) {
+  return sortKeys(style, {
+    comparator: (a, b) => {
+      const lenA = a.length
+      const lenB = b.length
+      const len = lenA > lenB ? lenB : lenA
+
+      for (let i = 0; i < len; i++) {
+        const codeA = a.charCodeAt(i)
+        const codeB = b.charCodeAt(i)
+        const cmpResult = cmpCode(codeA, codeB)
+
+        if (cmpResult !== 0) return cmpResult
+      }
+
+      if (lenA > lenB) return 1
+      if (lenA < lenB) return -1
+
+      return 0
+    },
+  })
+}
+
+function cmpCode(a, b) {
+  a = transCode(a)
+  b = transCode(b)
+
+  if (a > b) return 1
+  if (a < b) return -1
+  return 0
+}
+
+function transCode(code) {
+  // - should be placed after lowercase chars.
+  if (code === 45) return 123
+  return code
+}

src/Elements/Detail.js

@@ -0,0 +1,518 @@
+import isEmpty from 'licia/isEmpty'
+import lowerCase from 'licia/lowerCase'
+import pick from 'licia/pick'
+import toStr from 'licia/toStr'
+import map from 'licia/map'
+import isEl from 'licia/isEl'
+import escape from 'licia/escape'
+import startWith from 'licia/startWith'
+import contain from 'licia/contain'
+import unique from 'licia/unique'
+import each from 'licia/each'
+import keys from 'licia/keys'
+import isNull from 'licia/isNull'
+import trim from 'licia/trim'
+import isFn from 'licia/isFn'
+import isBool from 'licia/isBool'
+import safeGet from 'licia/safeGet'
+import $ from 'licia/$'
+import h from 'licia/h'
+import extend from 'licia/extend'
+import MutationObserver from 'licia/MutationObserver'
+import CssStore from './CssStore'
+import Settings from '../Settings/Settings'
+import LunaModal from 'luna-modal'
+import LunaBoxModel from 'luna-box-model'
+import chobitsu from '../lib/chobitsu'
+import { formatNodeName } from './util'
+import { isErudaEl, classPrefix as c } from '../lib/util'
+
+export default class Detail {
+  constructor($container, devtools) {
+    this._$container = $container
+    this._devtools = devtools
+    this._curEl = document.documentElement
+    this._initObserver()
+    this._initCfg()
+    this._initTpl()
+    this._bindEvent()
+  }
+  show(el) {
+    this._curEl = el
+    this._rmDefComputedStyle = true
+    this._computedStyleSearchKeyword = ''
+    this._enableObserver()
+    this._render()
+    this._highlight()
+  }
+  hide = () => {
+    this._$container.hide()
+    this._disableObserver()
+    chobitsu.domain('Overlay').hideHighlight()
+  }
+  destroy() {
+    this._disableObserver()
+    this.restoreEventTarget()
+    this._rmCfg()
+  }
+  overrideEventTarget() {
+    const winEventProto = getWinEventProto()
+
+    const origAddEvent = (this._origAddEvent = winEventProto.addEventListener)
+    const origRmEvent = (this._origRmEvent = winEventProto.removeEventListener)
+
+    winEventProto.addEventListener = function (type, listener, useCapture) {
+      addEvent(this, type, listener, useCapture)
+      origAddEvent.apply(this, arguments)
+    }
+
+    winEventProto.removeEventListener = function (type, listener, useCapture) {
+      rmEvent(this, type, listener, useCapture)
+      origRmEvent.apply(this, arguments)
+    }
+  }
+  restoreEventTarget() {
+    const winEventProto = getWinEventProto()
+
+    if (this._origAddEvent) winEventProto.addEventListener = this._origAddEvent
+    if (this._origRmEvent) winEventProto.removeEventListener = this._origRmEvent
+  }
+  _highlight = (type) => {
+    const el = this._curEl
+
+    const highlightConfig = {
+      showInfo: false,
+    }
+    if (!type || type === 'all') {
+      extend(highlightConfig, {
+        showInfo: true,
+        contentColor: 'rgba(111, 168, 220, .66)',
+        paddingColor: 'rgba(147, 196, 125, .55)',
+        borderColor: 'rgba(255, 229, 153, .66)',
+        marginColor: 'rgba(246, 178, 107, .66)',
+      })
+    } else if (type === 'margin') {
+      highlightConfig.marginColor = 'rgba(246, 178, 107, .66)'
+    } else if (type === 'border') {
+      highlightConfig.borderColor = 'rgba(255, 229, 153, .66)'
+    } else if (type === 'padding') {
+      highlightConfig.paddingColor = 'rgba(147, 196, 125, .55)'
+    } else if (type === 'content') {
+      highlightConfig.contentColor = 'rgba(111, 168, 220, .66)'
+    }
+
+    const { nodeId } = chobitsu.domain('DOM').getNodeId({ node: el })
+    chobitsu.domain('Overlay').highlightNode({
+      nodeId,
+      highlightConfig,
+    })
+  }
+  _initTpl() {
+    const $container = this._$container
+
+    const html = `<div class="${c('control')}">
+      <span class="${c('icon-arrow-left back')}"></span>
+      <span class="${c('element-name')}"></span>
+      <span class="${c('icon-refresh refresh')}"></span>
+    </div>
+    <div class="${c('element')}">
+      <div class="${c('attributes section')}"></div>
+      <div class="${c('styles section')}"></div>
+      <div class="${c('computed-style section')}"></div>
+      <div class="${c('listeners section')}"></div>
+    </div>`
+
+    $container.html(html)
+
+    this._$elementName = $container.find(c('.element-name'))
+    this._$attributes = $container.find(c('.attributes'))
+    this._$styles = $container.find(c('.styles'))
+    this._$listeners = $container.find(c('.listeners'))
+    this._$computedStyle = $container.find(c('.computed-style'))
+
+    const boxModelContainer = h('div')
+    this._$boxModel = $(boxModelContainer)
+    this._boxModel = new LunaBoxModel(boxModelContainer)
+  }
+  _toggleAllComputedStyle() {
+    this._rmDefComputedStyle = !this._rmDefComputedStyle
+
+    this._render()
+  }
+  _render() {
+    const data = this._getData(this._curEl)
+    const $attributes = this._$attributes
+    const $elementName = this._$elementName
+    const $styles = this._$styles
+    const $computedStyle = this._$computedStyle
+    const $listeners = this._$listeners
+
+    $elementName.html(data.name)
+
+    let attributes = '<tr><td>Empty</td></tr>'
+    if (!isEmpty(data.attributes)) {
+      attributes = map(data.attributes, ({ name, value }) => {
+        return `<tr>
+          <td class="${c('attribute-name-color')}">${escape(name)}</td>
+          <td class="${c('string-color')}">${value}</td>
+        </tr>`
+      }).join('')
+    }
+    attributes = `<h2>Attributes</h2>
+    <div class="${c('table-wrapper')}">
+      <table>
+        <tbody>
+          ${attributes} 
+        </tbody>
+      </table>
+    </div>`
+    $attributes.html(attributes)
+
+    let styles = ''
+    if (!isEmpty(data.styles)) {
+      const style = map(data.styles, ({ selectorText, style }) => {
+        style = map(style, (val, key) => {
+          return `<div class="${c('rule')}"><span>${escape(
+            key
+          )}</span>: ${val};</div>`
+        }).join('')
+        return `<div class="${c('style-rules')}">
+          <div>${escape(selectorText)} {</div>
+            ${style}
+          <div>}</div>
+        </div>`
+      }).join('')
+      styles = `<h2>Styles</h2>
+      <div class="${c('style-wrapper')}">
+        ${style}
+      </div>`
+      $styles.html(styles).show()
+    } else {
+      $styles.hide()
+    }
+
+    let computedStyle = ''
+    if (data.computedStyle) {
+      let toggleButton = c(`<div class="btn toggle-all-computed-style">
+        <span class="icon-expand"></span>
+      </div>`)
+      if (data.rmDefComputedStyle) {
+        toggleButton = c(`<div class="btn toggle-all-computed-style">
+          <span class="icon-compress"></span>
+        </div>`)
+      }
+
+      computedStyle = `<h2>
+        Computed Style
+        ${toggleButton}
+        <div class="${c('btn computed-style-search')}">
+          <span class="${c('icon-filter')}"></span>
+        </div>
+        ${
+          data.computedStyleSearchKeyword
+            ? `<div class="${c('btn filter-text')}">${escape(
+                data.computedStyleSearchKeyword
+              )}</div>`
+            : ''
+        }
+      </h2>
+      <div class="${c('box-model')}"></div>
+      <div class="${c('table-wrapper')}">
+        <table>
+          <tbody>
+          ${map(data.computedStyle, (val, key) => {
+            return `<tr>
+              <td class="${c('key')}">${escape(key)}</td>
+              <td>${val}</td>
+            </tr>`
+          }).join('')}
+          </tbody>
+        </table>
+      </div>`
+
+      $computedStyle.html(computedStyle).show()
+      this._boxModel.setOption('element', this._curEl)
+      $computedStyle.find(c('.box-model')).append(this._$boxModel.get(0))
+    } else {
+      $computedStyle.text('').hide()
+    }
+
+    let listeners = ''
+    if (data.listeners) {
+      listeners = map(data.listeners, (listeners, key) => {
+        listeners = map(listeners, ({ useCapture, listenerStr }) => {
+          return `<li ${useCapture ? `class="${c('capture')}"` : ''}>${escape(
+            listenerStr
+          )}</li>`
+        }).join('')
+        return `<div class="${c('listener')}">
+          <div class="${c('listener-type')}">${escape(key)}</div>
+          <ul class="${c('listener-content')}">
+            ${listeners}
+          </ul>
+        </div>`
+      }).join('')
+      listeners = `<h2>Event Listeners</h2>
+      <div class="${c('listener-wrapper')}">
+        ${listeners} 
+      </div>`
+      $listeners.html(listeners).show()
+    } else {
+      $listeners.hide()
+    }
+
+    this._$container.show()
+  }
+  _getData(el) {
+    const ret = {}
+
+    const cssStore = new CssStore(el)
+
+    const { className, id, attributes, tagName } = el
+
+    ret.computedStyleSearchKeyword = this._computedStyleSearchKeyword
+    ret.attributes = formatAttr(attributes)
+    ret.name = formatNodeName({ tagName, id, className, attributes })
+
+    const events = el.erudaEvents
+    if (events && keys(events).length !== 0) ret.listeners = events
+
+    if (needNoStyle(tagName)) {
+      return ret
+    }
+
+    let computedStyle = cssStore.getComputedStyle()
+
+    const styles = cssStore.getMatchedCSSRules()
+    styles.unshift(getInlineStyle(el.style))
+    styles.forEach((style) => processStyleRules(style.style))
+    ret.styles = styles
+
+    if (this._rmDefComputedStyle) {
+      computedStyle = rmDefComputedStyle(computedStyle, styles)
+    }
+    ret.rmDefComputedStyle = this._rmDefComputedStyle
+    const computedStyleSearchKeyword = lowerCase(ret.computedStyleSearchKeyword)
+    if (computedStyleSearchKeyword) {
+      computedStyle = pick(computedStyle, (val, property) => {
+        return (
+          contain(property, computedStyleSearchKeyword) ||
+          contain(val, computedStyleSearchKeyword)
+        )
+      })
+    }
+    processStyleRules(computedStyle)
+    ret.computedStyle = computedStyle
+
+    return ret
+  }
+  _bindEvent() {
+    const devtools = this._devtools
+
+    this._$container
+      .on('click', c('.toggle-all-computed-style'), () =>
+        this._toggleAllComputedStyle()
+      )
+      .on('click', c('.computed-style-search'), () => {
+        LunaModal.prompt('Filter').then((filter) => {
+          if (isNull(filter)) return
+          filter = trim(filter)
+          this._computedStyleSearchKeyword = filter
+          this._render()
+        })
+      })
+      .on('click', '.eruda-listener-content', function () {
+        const text = $(this).text()
+        const sources = devtools.get('sources')
+
+        if (sources) {
+          sources.set('js', text)
+          devtools.showTool('sources')
+        }
+      })
+      .on('click', c('.element-name'), () => {
+        const sources = devtools.get('sources')
+
+        if (sources) {
+          sources.set('object', this._curEl)
+          devtools.showTool('sources')
+        }
+      })
+      .on('click', c('.back'), this.hide)
+      .on('click', c('.refresh'), () => {
+        this._render()
+        devtools.notify('Refreshed', { icon: 'success' })
+      })
+
+    this._boxModel.on('highlight', this._highlight)
+  }
+  _initObserver() {
+    this._observer = new MutationObserver((mutations) => {
+      each(mutations, (mutation) => this._handleMutation(mutation))
+    })
+  }
+  _enableObserver() {
+    this._observer.observe(document.documentElement, {
+      attributes: true,
+      childList: true,
+      subtree: true,
+    })
+  }
+  _disableObserver() {
+    this._observer.disconnect()
+  }
+  _handleMutation(mutation) {
+    if (isErudaEl(mutation.target)) return
+
+    if (mutation.type === 'attributes') {
+      if (mutation.target !== this._curEl) return
+      this._render()
+    }
+  }
+  _rmCfg() {
+    const cfg = this.config
+
+    const settings = this._devtools.get('settings')
+
+    if (!settings) return
+
+    settings
+      .remove(cfg, 'overrideEventTarget')
+      .remove(cfg, 'observeElement')
+      .remove('Elements')
+  }
+  _initCfg() {
+    const cfg = (this.config = Settings.createCfg('elements', {
+      overrideEventTarget: true,
+    }))
+
+    if (cfg.get('overrideEventTarget')) this.overrideEventTarget()
+
+    cfg.on('change', (key, val) => {
+      switch (key) {
+        case 'overrideEventTarget':
+          return val ? this.overrideEventTarget() : this.restoreEventTarget()
+      }
+    })
+
+    const settings = this._devtools.get('settings')
+    if (!settings) return
+
+    settings
+      .text('Elements')
+      .switch(cfg, 'overrideEventTarget', 'Catch Event Listeners')
+
+    settings.separator()
+  }
+}
+
+function processStyleRules(style) {
+  each(style, (val, key) => (style[key] = processStyleRule(val)))
+}
+
+const formatAttr = (attributes) =>
+  map(attributes, (attr) => {
+    let { value } = attr
+    const { name } = attr
+    value = escape(value)
+
+    const isLink =
+      (name === 'src' || name === 'href') && !startWith(value, 'data')
+    if (isLink) value = wrapLink(value)
+    if (name === 'style') value = processStyleRule(value)
+
+    return { name, value }
+  })
+
+const regColor = /rgba?\((.*?)\)/g
+const regCssUrl = /url\("?(.*?)"?\)/g
+
+function processStyleRule(val) {
+  // For css custom properties, val is unable to retrieved.
+  val = toStr(val)
+
+  return val
+    .replace(
+      regColor,
+      '<span class="eruda-style-color" style="background-color: $&"></span>$&'
+    )
+    .replace(regCssUrl, (match, url) => `url("${wrapLink(url)}")`)
+}
+
+function getInlineStyle(style) {
+  const ret = {
+    selectorText: 'element.style',
+    style: {},
+  }
+
+  for (let i = 0, len = style.length; i < len; i++) {
+    const s = style[i]
+
+    ret.style[s] = style[s]
+  }
+
+  return ret
+}
+
+function rmDefComputedStyle(computedStyle, styles) {
+  const ret = {}
+
+  let keepStyles = ['display', 'width', 'height']
+  each(styles, (style) => {
+    keepStyles = keepStyles.concat(keys(style.style))
+  })
+  keepStyles = unique(keepStyles)
+
+  each(computedStyle, (val, key) => {
+    if (!contain(keepStyles, key)) return
+
+    ret[key] = val
+  })
+
+  return ret
+}
+
+const NO_STYLE_TAG = ['script', 'style', 'meta', 'title', 'link', 'head']
+
+const needNoStyle = (tagName) => {
+  NO_STYLE_TAG.indexOf(tagName.toLowerCase()) > -1
+}
+
+const wrapLink = (link) => `<a href="${link}" target="_blank">${link}</a>`
+
+function addEvent(el, type, listener, useCapture = false) {
+  if (!isEl(el) || !isFn(listener) || !isBool(useCapture)) return
+
+  const events = (el.erudaEvents = el.erudaEvents || {})
+
+  events[type] = events[type] || []
+  events[type].push({
+    listener: listener,
+    listenerStr: listener.toString(),
+    useCapture: useCapture,
+  })
+}
+
+function rmEvent(el, type, listener, useCapture = false) {
+  if (!isEl(el) || !isFn(listener) || !isBool(useCapture)) return
+
+  const events = el.erudaEvents
+
+  if (!(events && events[type])) return
+
+  const listeners = events[type]
+
+  for (let i = 0, len = listeners.length; i < len; i++) {
+    if (listeners[i].listener === listener) {
+      listeners.splice(i, 1)
+      break
+    }
+  }
+
+  if (listeners.length === 0) delete events[type]
+  if (keys(events).length === 0) delete el.erudaEvents
+}
+
+const getWinEventProto = () => {
+  return safeGet(window, 'EventTarget.prototype') || window.Node.prototype
+}

src/Elements/Elements.js

@@ -0,0 +1,325 @@
+import Tool from '../DevTools/Tool'
+import $ from 'licia/$'
+import isEl from 'licia/isEl'
+import nextTick from 'licia/nextTick'
+import Emitter from 'licia/Emitter'
+import map from 'licia/map'
+import MediaQuery from 'licia/MediaQuery'
+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'
+import Detail from './Detail'
+import chobitsu from '../lib/chobitsu'
+import emitter from '../lib/emitter'
+import { formatNodeName } from './util'
+
+export default class Elements extends Tool {
+  constructor() {
+    super()
+
+    this._style = evalCss(require('./Elements.scss'))
+
+    this.name = 'elements'
+    this._selectElement = false
+    this._observeElement = true
+    this._history = []
+
+    Emitter.mixin(this)
+  }
+  init($el, container) {
+    super.init($el)
+
+    this._container = container
+
+    this._initTpl()
+    this._htmlEl = document.documentElement
+    this._detail = new Detail(this._$detail, container)
+    this.config = this._detail.config
+    this._splitMediaQuery = new MediaQuery('screen and (min-width: 680px)')
+    this._splitMode = this._splitMediaQuery.isMatch()
+    this._domViewer = new LunaDomViewer(this._$domViewer.get(0), {
+      node: this._htmlEl,
+      ignore: (node) => isErudaEl(node) || isChobitsuEl(node),
+    })
+    this._domViewer.expand()
+    this._bindEvent()
+    chobitsu.domain('Overlay').enable()
+
+    nextTick(() => this._updateHistory())
+  }
+  show() {
+    super.show()
+    this._isShow = true
+
+    if (!this._curNode) {
+      this.select(document.body)
+    } else if (this._splitMode) {
+      this._showDetail()
+    }
+  }
+  hide() {
+    super.hide()
+    this._isShow = false
+
+    chobitsu.domain('Overlay').hideHighlight()
+  }
+  select(node) {
+    this._domViewer.select(node)
+    this._setNode(node)
+    this.emit('change', node)
+    return this
+  }
+  destroy() {
+    super.destroy()
+
+    emitter.off(emitter.SCALE, this._updateScale)
+    evalCss.remove(this._style)
+    this._detail.destroy()
+    chobitsu
+      .domain('Overlay')
+      .off('inspectNodeRequested', this._inspectNodeRequested)
+    chobitsu.domain('Overlay').disable()
+    this._splitMediaQuery.removeAllListeners()
+  }
+  _updateButtons() {
+    const $control = this._$control
+    const $showDetail = $control.find(c('.show-detail'))
+    const $copyNode = $control.find(c('.copy-node'))
+    const $deleteNode = $control.find(c('.delete-node'))
+    const iconDisabled = c('icon-disabled')
+
+    $showDetail.addClass(iconDisabled)
+    $copyNode.addClass(iconDisabled)
+    $deleteNode.addClass(iconDisabled)
+
+    const node = this._curNode
+
+    if (!node || isShadowRoot(node)) {
+      return
+    }
+
+    if (node !== document.documentElement && node !== document.body) {
+      $deleteNode.rmClass(iconDisabled)
+    }
+    $copyNode.rmClass(iconDisabled)
+
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      $showDetail.rmClass(iconDisabled)
+    }
+  }
+  _showDetail = () => {
+    if (!this._isShow || !this._curNode) {
+      return
+    }
+    if (this._curNode.nodeType === Node.ELEMENT_NODE) {
+      this._detail.show(this._curNode)
+    } else {
+      this._detail.show(this._curNode.parentNode || this._curNode.host)
+    }
+  }
+  _initTpl() {
+    const $el = this._$el
+
+    $el.html(
+      c(`<div class="elements">
+        <div class="control">
+          <span class="icon icon-select select"></span>
+          <span class="icon icon-eye show-detail"></span>
+          <span class="icon icon-copy copy-node"></span>
+          <span class="icon icon-delete delete-node"></span>
+        </div>
+        <div class="dom-viewer-container">
+          <div class="dom-viewer"></div>
+        </div>
+        <div class="crumbs"></div>
+      </div>
+      <div class="detail"></div>`)
+    )
+
+    this._$detail = $el.find(c('.detail'))
+    this._$domViewer = $el.find(c('.dom-viewer'))
+    this._$control = $el.find(c('.control'))
+    this._$crumbs = $el.find(c('.crumbs'))
+  }
+  _renderCrumbs() {
+    const crumbs = getCrumbs(this._curNode)
+    let html = ''
+    if (!isEmpty(crumbs)) {
+      html = map(crumbs, ({ text, idx }) => {
+        return `<li class="${c('crumb')}" data-idx="${idx}">${text}</div></li>`
+      }).join('')
+    }
+    this._$crumbs.html(html)
+  }
+  _back = () => {
+    if (this._curNode === this._htmlEl) return
+
+    const parentQueue = this._curParentQueue
+    let parent = parentQueue.shift()
+
+    while (!isElExist(parent)) {
+      parent = parentQueue.shift()
+    }
+
+    this.set(parent)
+  }
+  _bindEvent() {
+    const self = this
+
+    this._$el.on('click', c('.crumb'), function () {
+      let idx = toNum($(this).data('idx'))
+      let node = self._curNode
+
+      while (idx-- && node.parentElement) {
+        node = node.parentElement
+      }
+
+      if (isElExist(node)) {
+        self.select(node)
+      }
+    })
+
+    this._$control
+      .on('click', c('.select'), this._toggleSelect)
+      .on('click', c('.show-detail'), this._showDetail)
+      .on('click', c('.copy-node'), this._copyNode)
+      .on('click', c('.delete-node'), this._deleteNode)
+
+    this._domViewer.on('select', this._setNode).on('deselect', this._back)
+
+    chobitsu
+      .domain('Overlay')
+      .on('inspectNodeRequested', this._inspectNodeRequested)
+
+    this._splitMediaQuery.on('match', () => {
+      this._splitMode = true
+      this._showDetail()
+    })
+    this._splitMediaQuery.on('unmatch', () => {
+      this._splitMode = false
+      this._detail.hide()
+    })
+
+    emitter.on(emitter.SCALE, this._updateScale)
+  }
+  _updateScale = (scale) => {
+    this._splitMediaQuery.setQuery(`screen and (min-width: ${680 * scale}px)`)
+  }
+  _deleteNode = () => {
+    const node = this._curNode
+
+    if (node.parentNode) {
+      node.parentNode.removeChild(node)
+    }
+  }
+  _copyNode = () => {
+    const node = this._curNode
+
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      copy(node.outerHTML)
+    } else {
+      copy(node.nodeValue)
+    }
+
+    this._container.notify('Copied', { icon: 'success' })
+  }
+  _toggleSelect = () => {
+    this._$el.find(c('.select')).toggleClass(c('active'))
+    this._selectElement = !this._selectElement
+
+    if (this._selectElement) {
+      chobitsu.domain('Overlay').setInspectMode({
+        mode: 'searchForNode',
+        highlightConfig: {
+          showInfo: !isMobile(),
+          showRulers: false,
+          showAccessibilityInfo: !isMobile(),
+          showExtensionLines: false,
+          contrastAlgorithm: 'aa',
+          contentColor: 'rgba(111, 168, 220, .66)',
+          paddingColor: 'rgba(147, 196, 125, .55)',
+          borderColor: 'rgba(255, 229, 153, .66)',
+          marginColor: 'rgba(246, 178, 107, .66)',
+        },
+      })
+      this._container.hide()
+    } else {
+      chobitsu.domain('Overlay').setInspectMode({
+        mode: 'none',
+      })
+      chobitsu.domain('Overlay').hideHighlight()
+    }
+  }
+  _inspectNodeRequested = ({ backendNodeId }) => {
+    this._container.show()
+    this._toggleSelect()
+    try {
+      const { node } = chobitsu.domain('DOM').getNode({ nodeId: backendNodeId })
+      this.select(node)
+    } catch {
+      // No op
+    }
+  }
+  _setNode = (node) => {
+    if (node === this._curNode) return
+
+    this._curNode = node
+    this._renderCrumbs()
+
+    const parentQueue = []
+
+    let parent = node.parentNode
+    while (parent) {
+      parentQueue.push(parent)
+      parent = parent.parentNode
+    }
+    this._curParentQueue = parentQueue
+
+    if (this._splitMode) {
+      this._showDetail()
+    }
+    this._updateButtons()
+    this._updateHistory()
+  }
+  _updateHistory() {
+    const console = this._container.get('console')
+    if (!console) return
+
+    const history = this._history
+    history.unshift(this._curNode)
+    if (history.length > 5) history.pop()
+    for (let i = 0; i < 5; i++) {
+      console.setGlobal(`$${i}`, history[i])
+    }
+  }
+}
+
+const isElExist = (val) => isEl(val) && val.parentNode
+
+function getCrumbs(el) {
+  const ret = []
+  let i = 0
+
+  while (el) {
+    ret.push({
+      text: formatNodeName(el, { noAttr: true }),
+      idx: i++,
+    })
+
+    if (isShadowRoot(el)) {
+      el = el.host
+    }
+    if (!el.parentElement && isShadowRoot(el.parentNode)) {
+      el = el.parentNode
+    } else {
+      el = el.parentElement
+    }
+  }
+
+  return ret.reverse()
+}

src/Elements/Elements.scss

@@ -0,0 +1,253 @@
+@use '../style/variable' as *;
+@use '../style/mixin' as *;
+
+#elements {
+  .elements {
+    @include absolute();
+    padding-top: 40px;
+    padding-bottom: 24px;
+    font-size: 14px;
+  }
+  .control {
+    padding: 10px 0;
+    @include control();
+    .icon-eye {
+      right: 0;
+    }
+    .icon-copy {
+      right: 23px;
+    }
+    .icon-delete {
+      right: 46px;
+    }
+  }
+  .dom-viewer-container {
+    @include overflow-auto();
+    height: 100%;
+    padding: 5px 0;
+  }
+  .crumbs {
+    @include absolute(100%, 24px);
+    top: initial;
+    line-height: 24px;
+    bottom: 0;
+    border-top: 1px solid var(--border);
+    background: var(--darker-background);
+    color: var(--primary);
+    font-size: $font-size-s;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    li {
+      cursor: pointer;
+      padding: 0 7px;
+      display: inline-block;
+      &:hover,
+      &:last-child {
+        background: var(--highlight);
+      }
+    }
+    .icon-arrow-right {
+      font-size: $font-size-s;
+      position: relative;
+      top: 1px;
+    }
+  }
+  .detail {
+    @include absolute();
+    z-index: 10;
+    padding-top: 40px;
+    display: none;
+    background: var(--background);
+    .control {
+      padding: 10px 35px;
+      .element-name {
+        font-size: $font-size-s;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        width: 100%;
+        display: inline-block;
+      }
+      .icon-arrow-left {
+        left: 0;
+      }
+      .icon-refresh {
+        right: 0;
+      }
+    }
+    .element {
+      @include overflow-auto(y);
+      height: 100%;
+    }
+  }
+  .section {
+    border-bottom: 1px solid var(--border);
+    color: var(--foreground);
+    margin: 10px 0;
+    h2 {
+      color: var(--primary);
+      background: var(--darker-background);
+      border-top: 1px solid var(--border);
+      padding: $padding;
+      line-height: 18px;
+      font-size: $font-size;
+      transition: background-color $anim-duration;
+      @include right-btn();
+      &.active-effect {
+        cursor: pointer;
+      }
+      &.active-effect:active {
+        background: var(--highlight);
+        color: var(--select-foreground);
+      }
+    }
+  }
+  .attributes {
+    font-size: $font-size-s;
+    a {
+      color: var(--link-color);
+    }
+    .table-wrapper {
+      @include overflow-auto(x);
+    }
+    table {
+      td {
+        padding: 5px 10px;
+      }
+    }
+  }
+  .text-content {
+    background: #fff;
+    .content {
+      @include overflow-auto(x);
+      padding: $padding;
+    }
+  }
+  .style-color {
+    position: relative;
+    top: 1px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    margin-right: 2px;
+    border: 1px solid var(--border);
+    display: inline-block;
+  }
+  .box-model {
+    @include overflow-auto(x);
+    padding: $padding;
+    text-align: center;
+    border-bottom: 1px solid var(--color);
+  }
+  .computed-style {
+    font-size: $font-size-s;
+    a {
+      color: var(--link-color);
+    }
+    .table-wrapper {
+      @include overflow-auto(y);
+      max-height: 200px;
+      border-top: 1px solid var(--border);
+    }
+    table {
+      td {
+        padding: 5px 10px;
+        &.key {
+          white-space: nowrap;
+          color: var(--var-color);
+        }
+      }
+    }
+  }
+  .styles {
+    font-size: $font-size-s;
+    .style-wrapper {
+      padding: $padding;
+      .style-rules {
+        border: 1px solid var(--border);
+        padding: $padding;
+        margin-bottom: 10px;
+        .rule {
+          padding-left: 2em;
+          word-break: break-all;
+          a {
+            color: var(--link-color);
+          }
+          span {
+            color: var(--var-color);
+          }
+        }
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+  .listeners {
+    font-size: $font-size-s;
+    .listener-wrapper {
+      padding: $padding;
+      .listener {
+        margin-bottom: 10px;
+        overflow: hidden;
+        border: 1px solid var(--border);
+        .listener-type {
+          padding: $padding;
+          background: var(--darker-background);
+          color: var(--primary);
+        }
+        .listener-content {
+          li {
+            @include overflow-auto(x);
+            padding: $padding;
+            border-top: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+.safe-area #elements {
+  .elements {
+    @include safe-area(padding-bottom, 24px);
+  }
+  .crumbs {
+    @include safe-area(height, 24px);
+  }
+  .element {
+    @include safe-area(padding-bottom, 0px);
+  }
+}
+
+@media screen and (min-width: 680px) {
+  #elements {
+    .elements {
+      width: 50%;
+      .control {
+        .icon-eye {
+          display: none;
+        }
+        .icon-copy {
+          right: 0;
+        }
+        .icon-delete {
+          right: 23px;
+        }
+      }
+    }
+    .detail {
+      width: 50%;
+      left: initial;
+      right: 0;
+      border-left: 1px solid var(--border);
+      .control {
+        padding-left: 10px;
+        .icon-arrow-left {
+          display: none;
+        }
+      }
+    }
+  }
+}

src/Elements/util.js

@@ -0,0 +1,39 @@
+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 } = {}) {
+  if (node.nodeType === Node.TEXT_NODE) {
+    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
+
+  let ret = `<span class="eruda-tag-name-color">${node.tagName.toLowerCase()}</span>`
+
+  if (id !== '') ret += `<span class="eruda-function-color">#${id}</span>`
+
+  if (isStr(className)) {
+    let classes = ''
+    each(className.split(/\s+/g), (val) => {
+      if (val.trim() === '') return
+      classes += `.${val}`
+    })
+    ret += `<span class="eruda-attribute-name-color">${classes}</span>`
+  }
+
+  if (!noAttr) {
+    each(attributes, (attr) => {
+      const name = attr.name
+      if (name === 'id' || name === 'class' || name === 'style') return
+      ret += ` <span class="eruda-attribute-name-color">${name}</span><span class="eruda-operator-color">="</span><span class="eruda-string-color">${attr.value}</span><span class="eruda-operator-color">"</span>`
+    })
+  }
+
+  return ret
+}

src/EntryBtn/EntryBtn.js

@@ -0,0 +1,176 @@
+import emitter from '../lib/emitter'
+import Settings from '../Settings/Settings'
+import Emitter from 'licia/Emitter'
+import $ from 'licia/$'
+import nextTick from 'licia/nextTick'
+import orientation from 'licia/orientation'
+import pointerEvent from 'licia/pointerEvent'
+import { pxToNum, classPrefix as c, eventClient } from '../lib/util'
+import evalCss from '../lib/evalCss'
+
+const $document = $(document)
+
+export default class EntryBtn extends Emitter {
+  constructor($container) {
+    super()
+
+    this._style = evalCss(require('./EntryBtn.scss'))
+
+    this._$container = $container
+    this._initTpl()
+    this._bindEvent()
+    this._registerListener()
+  }
+  hide() {
+    this._$el.hide()
+  }
+  show() {
+    this._$el.show()
+  }
+  setPos(pos) {
+    if (this._isOutOfRange(pos)) {
+      pos = this._getDefPos()
+    }
+
+    this._$el.css({
+      left: pos.x,
+      top: pos.y,
+    })
+
+    this.config.set('pos', pos)
+  }
+  getPos() {
+    return this.config.get('pos')
+  }
+  destroy() {
+    evalCss.remove(this._style)
+    this._unregisterListener()
+    this._$el.remove()
+  }
+  _isOutOfRange(pos) {
+    pos = pos || this.config.get('pos')
+    const defPos = this._getDefPos()
+
+    return (
+      pos.x > defPos.x + 10 || pos.x < 0 || pos.y < 0 || pos.y > defPos.y + 10
+    )
+  }
+  _registerListener() {
+    this._scaleListener = () =>
+      nextTick(() => {
+        if (this._isOutOfRange()) this._resetPos()
+      })
+    emitter.on(emitter.SCALE, this._scaleListener)
+  }
+  _unregisterListener() {
+    emitter.off(emitter.SCALE, this._scaleListener)
+  }
+  _initTpl() {
+    const $container = this._$container
+
+    $container.append(
+      c('<div class="entry-btn"><span class="icon-tool"></span></div>')
+    )
+    this._$el = $container.find('.eruda-entry-btn')
+  }
+  _resetPos(orientationChanged) {
+    const cfg = this.config
+    let pos = cfg.get('pos')
+    const defPos = this._getDefPos()
+
+    if (!cfg.get('rememberPos') || orientationChanged) {
+      pos = defPos
+    }
+
+    this.setPos(pos)
+  }
+  _onDragStart = (e) => {
+    const $el = this._$el
+    $el.addClass(c('active'))
+
+    this._isClick = true
+    e = e.origEvent
+    this._startX = eventClient('x', e)
+    this._oldX = pxToNum($el.css('left'))
+    this._oldY = pxToNum($el.css('top'))
+    this._startY = eventClient('y', e)
+    $document.on(pointerEvent('move'), this._onDragMove)
+    $document.on(pointerEvent('up'), this._onDragEnd)
+  }
+  _onDragMove = (e) => {
+    const btnSize = this._$el.get(0).offsetWidth
+    const maxWidth = this._$container.get(0).offsetWidth
+    const maxHeight = this._$container.get(0).offsetHeight
+
+    e = e.origEvent
+    const deltaX = eventClient('x', e) - this._startX
+    const deltaY = eventClient('y', e) - this._startY
+    if (Math.abs(deltaX) > 3 || Math.abs(deltaY) > 3) {
+      this._isClick = false
+    }
+    let newX = this._oldX + deltaX
+    let newY = this._oldY + deltaY
+    if (newX < 0) {
+      newX = 0
+    } else if (newX > maxWidth - btnSize) {
+      newX = maxWidth - btnSize
+    }
+    if (newY < 0) {
+      newY = 0
+    } else if (newY > maxHeight - btnSize) {
+      newY = maxHeight - btnSize
+    }
+    this._$el.css({
+      left: newX,
+      top: newY,
+    })
+  }
+  _onDragEnd = (e) => {
+    const $el = this._$el
+
+    if (this._isClick) {
+      this.emit('click')
+    }
+
+    this._onDragMove(e)
+    $document.off(pointerEvent('move'), this._onDragMove)
+    $document.off(pointerEvent('up'), this._onDragEnd)
+
+    const cfg = this.config
+
+    if (cfg.get('rememberPos')) {
+      cfg.set('pos', {
+        x: pxToNum($el.css('left')),
+        y: pxToNum($el.css('top')),
+      })
+    }
+
+    $el.rmClass('eruda-active')
+  }
+  _bindEvent() {
+    const $el = this._$el
+
+    $el.on(pointerEvent('down'), this._onDragStart)
+
+    orientation.on('change', () => this._resetPos(true))
+    window.addEventListener('resize', () => this._resetPos())
+  }
+  initCfg(settings) {
+    const cfg = (this.config = Settings.createCfg('entry-button', {
+      rememberPos: true,
+      pos: this._getDefPos(),
+    }))
+
+    settings.switch(cfg, 'rememberPos', 'Remember Entry Button Position')
+
+    this._resetPos()
+  }
+  _getDefPos() {
+    const minWidth = this._$el.get(0).offsetWidth + 10
+
+    return {
+      x: window.innerWidth - minWidth,
+      y: window.innerHeight - minWidth,
+    }
+  }
+}

src/EntryBtn/EntryBtn.scss

@@ -0,0 +1,22 @@
+.container {
+  .entry-btn {
+    touch-action: none;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    background: #000;
+    opacity: 0.3;
+    border-radius: 10px;
+    position: relative;
+    z-index: 1000;
+    transition: opacity 0.3s;
+    color: #fff;
+    font-size: 25px;
+    align-items: center;
+    justify-content: center;
+    &.active,
+    &:active {
+      opacity: 0.8;
+    }
+  }
+}

src/Info/Info.js

@@ -0,0 +1,123 @@
+import Tool from '../DevTools/Tool'
+import defInfo from './defInfo'
+import each from 'licia/each'
+import isFn from 'licia/isFn'
+import isUndef from 'licia/isUndef'
+import cloneDeep from 'licia/cloneDeep'
+import evalCss from '../lib/evalCss'
+import map from 'licia/map'
+import escape from 'licia/escape'
+import copy from 'licia/copy'
+import $ from 'licia/$'
+import { classPrefix as c } from '../lib/util'
+
+export default class Info extends Tool {
+  constructor() {
+    super()
+
+    this._style = evalCss(require('./Info.scss'))
+
+    this.name = 'info'
+    this._infos = []
+  }
+  init($el, container) {
+    super.init($el)
+    this._container = container
+
+    this._addDefInfo()
+    this._bindEvent()
+  }
+  destroy() {
+    super.destroy()
+
+    evalCss.remove(this._style)
+  }
+  add(name, val) {
+    const infos = this._infos
+    let isUpdate = false
+
+    each(infos, (info) => {
+      if (name !== info.name) return
+
+      info.val = val
+      isUpdate = true
+    })
+
+    if (!isUpdate) infos.push({ name, val })
+
+    this._render()
+
+    return this
+  }
+  get(name) {
+    const infos = this._infos
+
+    if (isUndef(name)) {
+      return cloneDeep(infos)
+    }
+
+    let result
+
+    each(infos, (info) => {
+      if (name === info.name) result = info.val
+    })
+
+    return result
+  }
+  remove(name) {
+    const infos = this._infos
+
+    for (let i = infos.length - 1; i >= 0; i--) {
+      if (infos[i].name === name) infos.splice(i, 1)
+    }
+
+    this._render()
+
+    return this
+  }
+  clear() {
+    this._infos = []
+
+    this._render()
+
+    return this
+  }
+  _addDefInfo() {
+    each(defInfo, (info) => this.add(info.name, info.val))
+  }
+  _render() {
+    const infos = []
+
+    each(this._infos, ({ name, val }) => {
+      if (isFn(val)) val = val()
+
+      infos.push({ name, val })
+    })
+
+    const html = `<ul>${map(
+      infos,
+      (info) =>
+        `<li><h2 class="${c('title')}">${escape(info.name)}<span class="${c(
+          'icon-copy copy'
+        )}"></span></h2><div class="${c('content')}">${info.val}</div></li>`
+    ).join('')}</ul>`
+
+    this._renderHtml(html)
+  }
+  _bindEvent() {
+    const container = this._container
+
+    this._$el.on('click', c('.copy'), function () {
+      const $li = $(this).parent().parent()
+      const name = $li.find(c('.title')).text()
+      const content = $li.find(c('.content')).text()
+      copy(`${name}: ${content}`)
+      container.notify('Copied', { icon: 'success' })
+    })
+  }
+  _renderHtml(html) {
+    if (html === this._lastHtml) return
+    this._lastHtml = html
+    this._$el.html(html)
+  }
+}

src/Info/Info.scss

@@ -0,0 +1,60 @@
+@use '../style/variable' as *;
+@use '../style/mixin' as *;
+
+#info {
+  @include overflow-auto(y);
+  li {
+    margin: 10px;
+    border: 1px solid var(--border);
+    .title,
+    .content {
+      padding: $padding;
+    }
+    .title {
+      position: relative;
+      padding-bottom: 0;
+      color: var(--accent);
+      .icon-copy {
+        position: absolute;
+        right: 10px;
+        top: 14px;
+        color: var(--primary);
+        cursor: pointer;
+        transition: color $anim-duration;
+        &:active {
+          color: var(--accent);
+        }
+      }
+    }
+    .content {
+      margin: 0;
+      user-select: text;
+      color: var(--foreground);
+      font-size: $font-size-s;
+      word-break: break-all;
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        th,
+        td {
+          border: 1px solid var(--border);
+          padding: 10px;
+        }
+      }
+      * {
+        user-select: text;
+      }
+      a {
+        color: var(--link-color);
+      }
+    }
+    .device-key,
+    .system-key {
+      width: 100px;
+    }
+  }
+}
+
+.safe-area #info {
+  @include safe-area(padding-bottom, 10px);
+}

src/Info/defInfo.js

@@ -0,0 +1,57 @@
+import detectBrowser from 'licia/detectBrowser'
+import detectOs from 'licia/detectOs'
+import escape from 'licia/escape'
+
+const browser = detectBrowser()
+
+export default [
+  {
+    name: 'Location',
+    val() {
+      return escape(location.href)
+    },
+  },
+  {
+    name: 'User Agent',
+    val: navigator.userAgent,
+  },
+  {
+    name: 'Device',
+    val: [
+      '<table><tbody>',
+      `<tr><td class="eruda-device-key">screen</td><td>${screen.width} * ${screen.height}</td></tr>`,
+      `<tr><td>viewport</td><td>${window.innerWidth} * ${window.innerHeight}</td></tr>`,
+      `<tr><td>pixel ratio</td><td>${window.devicePixelRatio}</td></tr>`,
+      '</tbody></table>',
+    ].join(''),
+  },
+  {
+    name: 'System',
+    val: [
+      '<table><tbody>',
+      `<tr><td class="eruda-system-key">os</td><td>${detectOs()}</td></tr>`,
+      `<tr><td>browser</td><td>${
+        browser.name + ' ' + browser.version
+      }</td></tr>`,
+      '</tbody></table>',
+    ].join(''),
+  },
+  {
+    name: 'About',
+    val:
+      '<a href="https://eruda.liriliri.io" target="_blank">Eruda v' +
+      VERSION +
+      '</a>',
+  },
+  {
+    name: 'Backers',
+    val() {
+      return `
+        <a rel="noreferrer noopener" href="https://opencollective.com/eruda" target="_blank">
+          <img data-exclude="true" style="width: 100%;" loading="lazy" src="https://opencollective.com/eruda/backers.svg?width=${
+            window.innerWidth * 1.5
+          }&exclude=true">
+        </a>`
+    },
+  },
+]

src/Network/Detail.js

@@ -0,0 +1,166 @@
+import trim from 'licia/trim'
+import isEmpty from 'licia/isEmpty'
+import map from 'licia/map'
+import each from 'licia/each'
+import escape from 'licia/escape'
+import copy from 'licia/copy'
+import isJson from 'licia/isJson'
+import Emitter from 'licia/Emitter'
+import truncate from 'licia/truncate'
+import { classPrefix as c } from '../lib/util'
+
+export default class Detail extends Emitter {
+  constructor($container, devtools) {
+    super()
+    this._$container = $container
+    this._devtools = devtools
+
+    this._detailData = {}
+    this._bindEvent()
+  }
+  show(data) {
+    if (data.resTxt && trim(data.resTxt) === '') {
+      delete data.resTxt
+    }
+    if (isEmpty(data.resHeaders)) {
+      delete data.resHeaders
+    }
+    if (isEmpty(data.reqHeaders)) {
+      delete data.reqHeaders
+    }
+
+    let postData = ''
+    if (data.data) {
+      postData = `<pre class="${c('data')}">${escape(data.data)}</pre>`
+    }
+
+    let reqHeaders = '<tr><td>Empty</td></tr>'
+    if (data.reqHeaders) {
+      reqHeaders = map(data.reqHeaders, (val, key) => {
+        return `<tr>
+          <td class="${c('key')}">${escape(key)}</td>
+          <td>${escape(val)}</td>
+        </tr>`
+      }).join('')
+    }
+
+    let resHeaders = '<tr><td>Empty</td></tr>'
+    if (data.resHeaders) {
+      resHeaders = map(data.resHeaders, (val, key) => {
+        return `<tr>
+          <td class="${c('key')}">${escape(key)}</td>
+          <td>${escape(val)}</td>
+        </tr>`
+      }).join('')
+    }
+
+    let resTxt = ''
+    if (data.resTxt) {
+      let text = data.resTxt
+      if (text.length > MAX_RES_LEN) {
+        text = truncate(text, MAX_RES_LEN)
+      }
+      resTxt = `<pre class="${c('response')}">${escape(text)}</pre>`
+    }
+
+    const html = `<div class="${c('control')}">
+      <span class="${c('icon-arrow-left back')}"></span>
+      <span class="${c('icon-delete back')}"></span>
+      <span class="${c('url')}">${escape(data.url)}</span>
+      <span class="${c('icon-copy copy-res')}"></span>
+    </div>
+    <div class="${c('http')}">
+      ${postData}
+      <div class="${c('section')}">
+        <h2>Response Headers</h2>
+        <table class="${c('headers')}">
+          <tbody>
+            ${resHeaders}
+          </tbody>
+        </table>
+      </div>
+      <div class="${c('section')}">
+        <h2>Request Headers</h2>
+        <table class="${c('headers')}">
+          <tbody>
+            ${reqHeaders}
+          </tbody>
+        </table>
+      </div>
+      ${resTxt}
+    </div>`
+
+    this._$container.html(html).show()
+    this._detailData = data
+  }
+  hide() {
+    this._$container.hide()
+    this.emit('hide')
+  }
+  _copyRes = () => {
+    const detailData = this._detailData
+
+    let data = `${detailData.method} ${detailData.url} ${detailData.status}\n`
+    if (!isEmpty(detailData.data)) {
+      data += '\nRequest Data\n\n'
+      data += `${detailData.data}\n`
+    }
+    if (!isEmpty(detailData.reqHeaders)) {
+      data += '\nRequest Headers\n\n'
+      each(detailData.reqHeaders, (val, key) => (data += `${key}: ${val}\n`))
+    }
+    if (!isEmpty(detailData.resHeaders)) {
+      data += '\nResponse Headers\n\n'
+      each(detailData.resHeaders, (val, key) => (data += `${key}: ${val}\n`))
+    }
+    if (detailData.resTxt) {
+      data += `\n${detailData.resTxt}\n`
+    }
+
+    copy(data)
+    this._devtools.notify('Copied', { icon: 'success' })
+  }
+  _bindEvent() {
+    const devtools = this._devtools
+
+    this._$container
+      .on('click', c('.back'), () => this.hide())
+      .on('click', c('.copy-res'), this._copyRes)
+      .on('click', c('.http .response'), () => {
+        const data = this._detailData
+        const resTxt = data.resTxt
+
+        if (isJson(resTxt)) {
+          return showSources('object', resTxt)
+        }
+
+        switch (data.subType) {
+          case 'css':
+            return showSources('css', resTxt)
+          case 'html':
+            return showSources('html', resTxt)
+          case 'javascript':
+            return showSources('js', resTxt)
+          case 'json':
+            return showSources('object', resTxt)
+        }
+        switch (data.type) {
+          case 'image':
+            return showSources('img', data.url)
+        }
+      })
+
+    const showSources = (type, data) => {
+      const sources = devtools.get('sources')
+      if (!sources) {
+        return
+      }
+
+      sources.set(type, data)
+
+      devtools.showTool('sources')
+    }
+  }
+}
+
+const MAX_RES_LEN = 100000

src/Network/Network.js

@@ -0,0 +1,385 @@
+import Tool from '../DevTools/Tool'
+import $ from 'licia/$'
+import ms from 'licia/ms'
+import each from 'licia/each'
+import map from 'licia/map'
+import Detail from './Detail'
+import throttle from 'licia/throttle'
+import { getFileName, classPrefix as c } from '../lib/util'
+import evalCss from '../lib/evalCss'
+import chobitsu from '../lib/chobitsu'
+import emitter from '../lib/emitter'
+import LunaDataGrid from 'luna-data-grid'
+import ResizeSensor from 'licia/ResizeSensor'
+import MediaQuery from 'licia/MediaQuery'
+import { getType } from './util'
+import copy from 'licia/copy'
+import extend from 'licia/extend'
+import trim from 'licia/trim'
+import isNull from 'licia/isNull'
+import LunaModal from 'luna-modal'
+import { curlStr } from './util'
+
+export default class Network extends Tool {
+  constructor() {
+    super()
+
+    this._style = evalCss(require('./Network.scss'))
+
+    this.name = 'network'
+    this._requests = {}
+    this._selectedRequest = null
+    this._isRecording = true
+  }
+  init($el, container) {
+    super.init($el)
+
+    this._container = container
+    this._initTpl()
+    this._detail = new Detail(this._$detail, container)
+    this._splitMediaQuery = new MediaQuery('screen and (min-width: 680px)')
+    this._splitMode = this._splitMediaQuery.isMatch()
+    this._requestDataGrid = new LunaDataGrid(this._$requests.get(0), {
+      columns: [
+        {
+          id: 'name',
+          title: 'Name',
+          sortable: true,
+          weight: 30,
+        },
+        {
+          id: 'method',
+          title: 'Method',
+          sortable: true,
+          weight: 14,
+        },
+        {
+          id: 'status',
+          title: 'Status',
+          sortable: true,
+          weight: 14,
+        },
+        {
+          id: 'type',
+          title: 'Type',
+          sortable: true,
+          weight: 14,
+        },
+        {
+          id: 'size',
+          title: 'Size',
+          sortable: true,
+          weight: 14,
+        },
+        {
+          id: 'time',
+          title: 'Time',
+          sortable: true,
+          weight: 14,
+        },
+      ],
+    })
+    this._resizeSensor = new ResizeSensor($el.get(0))
+    this._bindEvent()
+  }
+  show() {
+    super.show()
+    this._updateDataGridHeight()
+  }
+  clear() {
+    this._requests = {}
+    this._requestDataGrid.clear()
+  }
+  requests() {
+    const ret = []
+    each(this._requests, (request) => {
+      ret.push(request)
+    })
+    return ret
+  }
+  _updateDataGridHeight() {
+    const height = this._$el.offset().height - this._$control.offset().height
+    this._requestDataGrid.setOption({
+      minHeight: height,
+      maxHeight: height,
+    })
+  }
+  _reqWillBeSent = (params) => {
+    if (!this._isRecording) {
+      return
+    }
+
+    const request = {
+      name: getFileName(params.request.url),
+      url: params.request.url,
+      status: 'pending',
+      type: 'unknown',
+      subType: 'unknown',
+      size: 0,
+      data: params.request.postData,
+      method: params.request.method,
+      startTime: params.timestamp * 1000,
+      time: 0,
+      resTxt: '',
+      done: false,
+      reqHeaders: params.request.headers || {},
+      resHeaders: {},
+    }
+    let node
+    request.render = () => {
+      const data = {
+        name: request.name,
+        method: request.method,
+        status: request.status,
+        type: request.subType,
+        size: request.size,
+        time: request.displayTime,
+      }
+      if (node) {
+        node.data = data
+        node.render()
+      } else {
+        node = this._requestDataGrid.append(data, { selectable: true })
+        $(node.container).data('id', params.requestId)
+      }
+      if (request.hasErr) {
+        $(node.container).addClass(c('request-error'))
+      }
+    }
+    request.render()
+    this._requests[params.requestId] = request
+  }
+  _resReceivedExtraInfo = (params) => {
+    const request = this._requests[params.requestId]
+    if (!this._isRecording || !request) {
+      return
+    }
+
+    request.resHeaders = params.headers
+
+    this._updateType(request)
+    request.render()
+  }
+  _updateType(request) {
+    const contentType = request.resHeaders['content-type'] || ''
+    const { type, subType } = getType(contentType)
+    request.type = type
+    request.subType = subType
+  }
+  _resReceived = (params) => {
+    const request = this._requests[params.requestId]
+    if (!this._isRecording || !request) {
+      return
+    }
+
+    const { response } = params
+    const { status, headers } = response
+    request.status = status
+    if (status < 200 || status >= 300) {
+      request.hasErr = true
+    }
+    if (headers) {
+      request.resHeaders = headers
+      this._updateType(request)
+    }
+
+    request.render()
+  }
+  _loadingFinished = (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.size = params.encodedDataLength
+    request.done = true
+    request.resTxt = chobitsu.domain('Network').getResponseBody({
+      requestId: params.requestId,
+    }).body
+
+    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
+
+    copy(
+      curlStr({
+        requestMethod: request.method,
+        url() {
+          return request.url
+        },
+        requestFormData() {
+          return request.data
+        },
+        requestHeaders() {
+          const reqHeaders = request.reqHeaders || {}
+          extend(reqHeaders, {
+            'User-Agent': navigator.userAgent,
+            Referer: location.href,
+          })
+
+          return map(reqHeaders, (value, name) => {
+            return {
+              name,
+              value,
+            }
+          })
+        },
+      })
+    )
+
+    this._container.notify('Copied', { icon: 'success' })
+  }
+  _updateButtons() {
+    const $control = this._$control
+    const $showDetail = $control.find(c('.show-detail'))
+    const $copyCurl = $control.find(c('.copy-curl'))
+    const iconDisabled = c('icon-disabled')
+
+    $showDetail.addClass(iconDisabled)
+    $copyCurl.addClass(iconDisabled)
+
+    if (this._selectedRequest) {
+      $showDetail.rmClass(iconDisabled)
+      $copyCurl.rmClass(iconDisabled)
+    }
+  }
+  _toggleRecording = () => {
+    this._$control.find(c('.record')).toggleClass(c('recording'))
+    this._isRecording = !this._isRecording
+  }
+  _showDetail = () => {
+    if (this._selectedRequest) {
+      if (this._splitMode) {
+        this._$network.css('width', '50%')
+      }
+      this._detail.show(this._selectedRequest)
+    }
+  }
+  _bindEvent() {
+    const $control = this._$control
+    const $filterText = this._$filterText
+    const requestDataGrid = this._requestDataGrid
+
+    const self = this
+
+    $control
+      .on('click', c('.clear-request'), () => this.clear())
+      .on('click', c('.show-detail'), this._showDetail)
+      .on('click', c('.copy-curl'), this._copyCurl)
+      .on('click', c('.record'), this._toggleRecording)
+      .on('click', c('.filter'), () => {
+        LunaModal.prompt('Filter').then((filter) => {
+          if (isNull(filter)) return
+
+          $filterText.text(filter)
+          requestDataGrid.setOption('filter', trim(filter))
+        })
+      })
+
+    requestDataGrid.on('select', (node) => {
+      const id = $(node.container).data('id')
+      const request = self._requests[id]
+      this._selectedRequest = request
+      this._updateButtons()
+      if (this._splitMode) {
+        this._showDetail()
+      }
+    })
+
+    requestDataGrid.on('deselect', () => {
+      this._selectedRequest = null
+      this._updateButtons()
+      this._detail.hide()
+    })
+
+    this._resizeSensor.addListener(
+      throttle(() => this._updateDataGridHeight(), 15)
+    )
+
+    this._splitMediaQuery.on('match', () => {
+      this._detail.hide()
+      this._splitMode = true
+    })
+    this._splitMediaQuery.on('unmatch', () => {
+      this._detail.hide()
+      this._splitMode = false
+    })
+    this._detail.on('hide', () => {
+      if (this._splitMode) {
+        this._$network.css('width', '100%')
+      }
+    })
+
+    chobitsu.domain('Network').enable()
+
+    const network = chobitsu.domain('Network')
+    network.on('requestWillBeSent', this._reqWillBeSent)
+    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)
+  }
+  _updateScale = (scale) => {
+    this._splitMediaQuery.setQuery(`screen and (min-width: ${680 * scale}px)`)
+  }
+  destroy() {
+    super.destroy()
+
+    this._resizeSensor.destroy()
+    evalCss.remove(this._style)
+    this._splitMediaQuery.removeAllListeners()
+
+    const network = chobitsu.domain('Network')
+    network.off('requestWillBeSent', this._reqWillBeSent)
+    network.off('responseReceivedExtraInfo', this._resReceivedExtraInfo)
+    network.off('responseReceived', this._resReceived)
+    network.off('loadingFinished', this._loadingFinished)
+
+    emitter.off(emitter.SCALE, this._updateScale)
+  }
+  _initTpl() {
+    const $el = this._$el
+    $el.html(
+      c(`<div class="network">
+        <div class="control">
+          <span class="icon-record record recording"></span>
+          <span class="icon-clear clear-request"></span>
+          <span class="icon-eye icon-disabled show-detail"></span>
+          <span class="icon-copy icon-disabled copy-curl"></span>
+          <span class="filter-text"></span>
+          <span class="icon-filter filter"></span>
+        </div>
+        <div class="requests"></div>
+      </div>
+      <div class="detail"></div>`)
+    )
+    this._$network = $el.find(c('.network'))
+    this._$detail = $el.find(c('.detail'))
+    this._$requests = $el.find(c('.requests'))
+    this._$control = $el.find(c('.control'))
+    this._$filterText = $el.find(c('.filter-text'))
+  }
+}

src/Network/Network.scss

@@ -0,0 +1,175 @@
+@use '../style/variable' as *;
+@use '../style/mixin' as *;
+
+#network {
+  .network {
+    @include absolute();
+    padding-top: 39px;
+  }
+  .control {
+    padding: 10px;
+    border-bottom: none;
+    @include control();
+    .title {
+      font-size: $font-size;
+    }
+    .icon-clear {
+      left: 23px;
+    }
+    .icon-eye {
+      right: 0;
+    }
+    .icon-copy {
+      right: 23px;
+    }
+    .icon-filter {
+      right: 46px;
+    }
+    .filter-text {
+      white-space: nowrap;
+      position: absolute;
+      line-height: 20px;
+      max-width: 80px;
+      overflow: hidden;
+      right: 88px;
+      font-size: $font-size;
+      text-overflow: ellipsis;
+    }
+    .icon-record {
+      left: 0;
+      &.recording {
+        color: var(--console-error-foreground);
+        text-shadow: 0 0 4px var(--console-error-foreground);
+      }
+    }
+  }
+  .request-error {
+    color: var(--console-error-foreground);
+  }
+  .luna-data-grid:focus {
+    .luna-data-grid-data-container {
+      .request-error.luna-data-grid-selected {
+        background: var(--console-error-background);
+      }
+    }
+  }
+  .luna-data-grid {
+    border-left: none;
+    border-right: none;
+  }
+  .detail {
+    @include absolute();
+    z-index: 10;
+    display: none;
+    padding-top: 40px;
+    background: var(--background);
+    .control {
+      padding: 10px 35px;
+      border-bottom: 1px solid var(--border);
+      .url {
+        font-size: $font-size-s;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        width: 100%;
+        display: inline-block;
+      }
+      .icon-arrow-left {
+        left: 0;
+      }
+      .icon-delete {
+        left: 0;
+        display: none;
+      }
+      .icon-copy {
+        right: 0;
+      }
+    }
+    .http {
+      @include overflow-auto(y);
+      height: 100%;
+      .section {
+        border-top: 1px solid var(--border);
+        border-bottom: 1px solid var(--border);
+        margin-top: 10px;
+        margin-bottom: 10px;
+        h2 {
+          background: var(--darker-background);
+          color: var(--primary);
+          padding: $padding;
+          line-height: 18px;
+          font-size: $font-size;
+        }
+        table {
+          color: var(--foreground);
+          * {
+            user-select: text;
+          }
+          td {
+            font-size: $font-size-s;
+            padding: 5px 10px;
+            word-break: break-all;
+          }
+          .key {
+            white-space: nowrap;
+            font-weight: bold;
+            color: var(--accent);
+          }
+        }
+      }
+      .response,
+      .data {
+        user-select: text;
+        @include overflow-auto(x);
+        padding: $padding;
+        font-size: $font-size-s;
+        margin: 10px 0;
+        white-space: pre-wrap;
+        border-top: 1px solid var(--border);
+        color: var(--foreground);
+        border-bottom: 1px solid var(--border);
+      }
+    }
+  }
+}
+
+.safe-area #network {
+  .http {
+    @include safe-area(padding-bottom, 0px);
+  }
+}
+
+@media screen and (min-width: 680px) {
+  #network {
+    .network {
+      .control {
+        .icon-eye {
+          display: none;
+        }
+        .icon-copy {
+          right: 0;
+        }
+        .icon-filter {
+          right: 23px;
+        }
+        .filter-text {
+          right: 55px;
+        }
+      }
+    }
+    .detail {
+      width: 50%;
+      left: initial;
+      right: 0;
+      border-left: 1px solid var(--border);
+      .control {
+        .icon-arrow-left {
+          display: none;
+        }
+        .icon-delete {
+          display: block;
+        }
+      }
+    }
+  }
+}

src/Network/util.js

@@ -0,0 +1,108 @@
+import last from 'licia/last'
+import detectOs from 'licia/detectOs'
+import arrToMap from 'licia/arrToMap'
+
+export function getType(contentType) {
+  if (!contentType) return 'unknown'
+
+  const type = contentType.split(';')[0].split('/')
+
+  return {
+    type: type[0],
+    subType: last(type),
+  }
+}
+
+export function curlStr(request) {
+  let platform = detectOs()
+  if (platform === 'windows') {
+    platform = 'win'
+  }
+  let command = []
+  const ignoredHeaders = arrToMap([
+    'accept-encoding',
+    'host',
+    'method',
+    'path',
+    'scheme',
+    'version',
+  ])
+
+  function escapeStringWin(str) {
+    const encapsChars = /[\r\n]/.test(str) ? '^"' : '"'
+    return (
+      encapsChars +
+      str
+        .replace(/\\/g, '\\\\')
+        .replace(/"/g, '\\"')
+        .replace(/[^a-zA-Z0-9\s_\-:=+~'/.',?;()*`&]/g, '^$&')
+        .replace(/%(?=[a-zA-Z0-9_])/g, '%^')
+        .replace(/\r?\n/g, '^\n\n') +
+      encapsChars
+    )
+  }
+
+  function escapeStringPosix(str) {
+    function escapeCharacter(x) {
+      const code = x.charCodeAt(0)
+      let hexString = code.toString(16)
+      while (hexString.length < 4) {
+        hexString = '0' + hexString
+      }
+
+      return '\\u' + hexString
+    }
+
+    // eslint-disable-next-line no-control-regex
+    if (/[\0-\x1F\x7F-\x9F!]|'/.test(str)) {
+      return (
+        "$'" +
+        str
+          .replace(/\\/g, '\\\\')
+          .replace(/'/g, "\\'")
+          .replace(/\n/g, '\\n')
+          .replace(/\r/g, '\\r')
+          // eslint-disable-next-line no-control-regex
+          .replace(/[\0-\x1F\x7F-\x9F!]/g, escapeCharacter) +
+        "'"
+      )
+    }
+    return "'" + str + "'"
+  }
+
+  const escapeString = platform === 'win' ? escapeStringWin : escapeStringPosix
+
+  command.push(escapeString(request.url()).replace(/[[{}\]]/g, '\\$&'))
+
+  let inferredMethod = 'GET'
+  const data = []
+  const formData = request.requestFormData()
+  if (formData) {
+    data.push('--data-raw ' + escapeString(formData))
+    ignoredHeaders['content-length'] = true
+    inferredMethod = 'POST'
+  }
+
+  if (request.requestMethod !== inferredMethod) {
+    command.push('-X ' + escapeString(request.requestMethod))
+  }
+
+  const requestHeaders = request.requestHeaders()
+  for (let i = 0; i < requestHeaders.length; i++) {
+    const header = requestHeaders[i]
+    const name = header.name.replace(/^:/, '')
+    if (ignoredHeaders[name.toLowerCase()]) {
+      continue
+    }
+    command.push('-H ' + escapeString(name + ': ' + header.value))
+  }
+  command = command.concat(data)
+  command.push('--compressed')
+
+  return (
+    'curl ' +
+    command.join(
+      command.length >= 3 ? (platform === 'win' ? ' ^\n  ' : ' \\\n  ') : ' '
+    )
+  )
+}

src/Resources/Cookie.js

@@ -0,0 +1,190 @@
+import map from 'licia/map'
+import trim from 'licia/trim'
+import isNull from 'licia/isNull'
+import each from 'licia/each'
+import copy from 'licia/copy'
+import LunaModal from 'luna-modal'
+import LunaDataGrid from 'luna-data-grid'
+import { setState, getState } from './util'
+import chobitsu from '../lib/chobitsu'
+import { classPrefix as c } from '../lib/util'
+
+export default class Cookie {
+  constructor($container, devtools) {
+    this._$container = $container
+    this._devtools = devtools
+    this._selectedItem = null
+
+    this._initTpl()
+    this._dataGrid = new LunaDataGrid(this._$dataGrid.get(0), {
+      columns: [
+        {
+          id: 'key',
+          title: 'Key',
+          weight: 30,
+        },
+        {
+          id: 'value',
+          title: 'Value',
+          weight: 90,
+        },
+      ],
+      minHeight: 60,
+      maxHeight: 223,
+    })
+
+    this._bindEvent()
+  }
+  refresh() {
+    const $container = this._$container
+    const dataGrid = this._dataGrid
+
+    const { cookies } = chobitsu.domain('Network').getCookies()
+    const cookieData = map(cookies, ({ name, value }) => ({
+      key: name,
+      val: value,
+    }))
+
+    dataGrid.clear()
+    each(cookieData, ({ key, val }) => {
+      dataGrid.append(
+        {
+          key,
+          value: val,
+        },
+        {
+          selectable: true,
+        }
+      )
+    })
+
+    const cookieState = getState('cookie', cookieData.length)
+    setState($container, cookieState)
+  }
+  _initTpl() {
+    const $container = this._$container
+
+    $container.html(
+      c(`<h2 class="title">
+      Cookie
+      <div class="btn refresh-cookie">
+        <span class="icon-refresh"></span>
+      </div>
+      <div class="btn show-detail btn-disabled">
+        <span class="icon icon-eye"></span>
+      </div>
+      <div class="btn copy-cookie btn-disabled">
+        <span class="icon icon-copy"></span>
+      </div>
+      <div class="btn delete-cookie btn-disabled">
+        <span class="icon icon-delete"></span>
+      </div>
+      <div class="btn clear-cookie">
+        <span class="icon-clear"></span>
+      </div>
+      <div class="btn filter" data-type="cookie">
+        <span class="icon-filter"></span>
+      </div>
+      <div class="btn filter-text"></div>
+    </h2>
+    <div class="data-grid"></div>`)
+    )
+
+    this._$dataGrid = $container.find(c('.data-grid'))
+    this._$filterText = $container.find(c('.filter-text'))
+  }
+  _updateButtons() {
+    const $container = this._$container
+    const $showDetail = $container.find(c('.show-detail'))
+    const $deleteCookie = $container.find(c('.delete-cookie'))
+    const $copyCookie = $container.find(c('.copy-cookie'))
+    const btnDisabled = c('btn-disabled')
+
+    $showDetail.addClass(btnDisabled)
+    $deleteCookie.addClass(btnDisabled)
+    $copyCookie.addClass(btnDisabled)
+
+    if (this._selectedItem) {
+      $showDetail.rmClass(btnDisabled)
+      $deleteCookie.rmClass(btnDisabled)
+      $copyCookie.rmClass(btnDisabled)
+    }
+  }
+  _getVal(key) {
+    const { cookies } = chobitsu.domain('Network').getCookies()
+
+    for (let i = 0, len = cookies.length; i < len; i++) {
+      if (cookies[i].name === key) {
+        return cookies[i].value
+      }
+    }
+
+    return ''
+  }
+  _bindEvent() {
+    const devtools = this._devtools
+
+    this._$container
+      .on('click', c('.refresh-cookie'), () => {
+        devtools.notify('Refreshed', { icon: 'success' })
+        this.refresh()
+      })
+      .on('click', c('.clear-cookie'), () => {
+        chobitsu.domain('Storage').clearDataForOrigin({
+          storageTypes: 'cookies',
+        })
+        this.refresh()
+      })
+      .on('click', c('.delete-cookie'), () => {
+        const key = this._selectedItem
+
+        chobitsu.domain('Network').deleteCookies({ name: key })
+        this.refresh()
+      })
+      .on('click', c('.show-detail'), () => {
+        const key = this._selectedItem
+        const val = this._getVal(key)
+
+        try {
+          showSources('object', JSON.parse(val))
+        } catch {
+          showSources('raw', val)
+        }
+      })
+      .on('click', c('.copy-cookie'), () => {
+        const key = this._selectedItem
+        copy(this._getVal(key))
+        devtools.notify('Copied', { icon: 'success' })
+      })
+      .on('click', c('.filter'), () => {
+        LunaModal.prompt('Filter').then((filter) => {
+          if (isNull(filter)) return
+          filter = trim(filter)
+          this._filter = filter
+          this._$filterText.text(filter)
+          this._dataGrid.setOption('filter', filter)
+        })
+      })
+
+    function showSources(type, data) {
+      const sources = devtools.get('sources')
+      if (!sources) return
+
+      sources.set(type, data)
+
+      devtools.showTool('sources')
+
+      return true
+    }
+
+    this._dataGrid
+      .on('select', (node) => {
+        this._selectedItem = node.data.key
+        this._updateButtons()
+      })
+      .on('deselect', () => {
+        this._selectedItem = null
+        this._updateButtons()
+      })
+  }
+}

src/Resources/Resources.js

@@ -0,0 +1,444 @@
+import Tool from '../DevTools/Tool'
+import Settings from '../Settings/Settings'
+import $ from 'licia/$'
+import escape from 'licia/escape'
+import isEmpty from 'licia/isEmpty'
+import contain from 'licia/contain'
+import unique from 'licia/unique'
+import each from 'licia/each'
+import sameOrigin from 'licia/sameOrigin'
+import ajax from 'licia/ajax'
+import MutationObserver from 'licia/MutationObserver'
+import toArr from 'licia/toArr'
+import concat from 'licia/concat'
+import map from 'licia/map'
+import { isErudaEl, classPrefix as c } from '../lib/util'
+import evalCss from '../lib/evalCss'
+import Storage from './Storage'
+import Cookie from './Cookie'
+import { setState, getState } from './util'
+
+export default class Resources extends Tool {
+  constructor() {
+    super()
+
+    this._style = evalCss(require('./Resources.scss'))
+
+    this.name = 'resources'
+    this._hideErudaSetting = false
+    this._observeElement = true
+  }
+  init($el, container) {
+    super.init($el)
+
+    this._container = container
+
+    this._initTpl()
+    this._localStorage = new Storage(
+      this._$localStorage,
+      container,
+      this,
+      'local'
+    )
+    this._sessionStorage = new Storage(
+      this._$sessionStorage,
+      container,
+      this,
+      'session'
+    )
+    this._cookie = new Cookie(this._$cookie, container)
+
+    this._bindEvent()
+    this._initObserver()
+    this._initCfg()
+  }
+  refresh() {
+    return this.refreshLocalStorage()
+      .refreshSessionStorage()
+      .refreshCookie()
+      .refreshScript()
+      .refreshStylesheet()
+      .refreshIframe()
+      .refreshImage()
+  }
+  destroy() {
+    super.destroy()
+
+    this._localStorage.destroy()
+    this._sessionStorage.destroy()
+    this._disableObserver()
+    evalCss.remove(this._style)
+    this._rmCfg()
+  }
+  refreshScript() {
+    let scriptData = []
+
+    $('script').each(function () {
+      const src = this.src
+
+      if (src !== '') scriptData.push(src)
+    })
+
+    scriptData = unique(scriptData)
+
+    const scriptState = getState('script', scriptData.length)
+    let scriptDataHtml = '<li>Empty</li>'
+    if (!isEmpty(scriptData)) {
+      scriptDataHtml = map(scriptData, (script) => {
+        script = escape(script)
+        return `<li><a href="${script}" target="_blank" class="${c(
+          'js-link'
+        )}">${script}</a></li>`
+      }).join('')
+    }
+
+    const scriptHtml = `<h2 class="${c('title')}">
+      Script
+      <div class="${c('btn refresh-script')}">
+        <span class="${c('icon-refresh')}"></span>
+      </div>
+    </h2>
+    <ul class="${c('link-list')}">
+      ${scriptDataHtml}
+    </ul>`
+
+    const $script = this._$script
+    setState($script, scriptState)
+    $script.html(scriptHtml)
+
+    return this
+  }
+  refreshStylesheet() {
+    let stylesheetData = []
+
+    $('link').each(function () {
+      if (this.rel !== 'stylesheet') return
+
+      stylesheetData.push(this.href)
+    })
+
+    stylesheetData = unique(stylesheetData)
+
+    const stylesheetState = getState('stylesheet', stylesheetData.length)
+    let stylesheetDataHtml = '<li>Empty</li>'
+    if (!isEmpty(stylesheetData)) {
+      stylesheetDataHtml = map(stylesheetData, (stylesheet) => {
+        stylesheet = escape(stylesheet)
+        return ` <li><a href="${stylesheet}" target="_blank" class="${c(
+          'css-link'
+        )}">${stylesheet}</a></li>`
+      }).join('')
+    }
+
+    const stylesheetHtml = `<h2 class="${c('title')}">
+      Stylesheet
+      <div class="${c('btn refresh-stylesheet')}">
+        <span class="${c('icon-refresh')}"></span>
+      </div>
+    </h2>
+    <ul class="${c('link-list')}">
+      ${stylesheetDataHtml}
+    </ul>`
+
+    const $stylesheet = this._$stylesheet
+    setState($stylesheet, stylesheetState)
+    $stylesheet.html(stylesheetHtml)
+
+    return this
+  }
+  refreshIframe() {
+    let iframeData = []
+
+    $('iframe').each(function () {
+      const $this = $(this)
+      const src = $this.attr('src')
+
+      if (src) iframeData.push(src)
+    })
+
+    iframeData = unique(iframeData)
+
+    let iframeDataHtml = '<li>Empty</li>'
+    if (!isEmpty(iframeData)) {
+      iframeDataHtml = map(iframeData, (iframe) => {
+        iframe = escape(iframe)
+        return `<li><a href="${iframe}" target="_blank" class="${c(
+          'iframe-link'
+        )}">${iframe}</a></li>`
+      }).join('')
+    }
+    const iframeHtml = `<h2 class="${c('title')}">
+      Iframe
+      <div class="${c('btn refresh-iframe')}">
+        <span class="${c('icon-refresh')}"></span>
+      </div>
+    </h2>
+    <ul class="${c('link-list')}">
+      ${iframeDataHtml}
+    </ul>`
+
+    this._$iframe.html(iframeHtml)
+
+    return this
+  }
+  refreshLocalStorage() {
+    this._localStorage.refresh()
+
+    return this
+  }
+  refreshSessionStorage() {
+    this._sessionStorage.refresh()
+
+    return this
+  }
+  refreshCookie() {
+    this._cookie.refresh()
+
+    return this
+  }
+  refreshImage() {
+    let imageData = []
+
+    const performance = (this._performance =
+      window.webkitPerformance || window.performance)
+    if (performance && performance.getEntries) {
+      const entries = this._performance.getEntries()
+      entries.forEach((entry) => {
+        if (entry.initiatorType === 'img' || isImg(entry.name)) {
+          if (contain(entry.name, 'exclude=true')) {
+            return
+          }
+          imageData.push(entry.name)
+        }
+      })
+    } else {
+      $('img').each(function () {
+        const $this = $(this)
+        const src = $this.attr('src')
+
+        if ($this.data('exclude') === 'true') {
+          return
+        }
+
+        imageData.push(src)
+      })
+    }
+
+    imageData = unique(imageData)
+    imageData.sort()
+
+    const imageState = getState('image', imageData.length)
+    let imageDataHtml = '<li>Empty</li>'
+    if (!isEmpty(imageData)) {
+      // prettier-ignore
+      imageDataHtml = map(imageData, (image) => {
+        return `<li class="${c('image')}">
+          <img src="${escape(image)}" data-exclude="true" class="${c('img-link')}"/>
+        </li>`
+      }).join('')
+    }
+
+    const imageHtml = `<h2 class="${c('title')}">
+      Image
+      <div class="${c('btn refresh-image')}">
+        <span class="${c('icon-refresh')}"></span>
+      </div>
+    </h2>
+    <ul class="${c('image-list')}">
+      ${imageDataHtml}
+    </ul>`
+
+    const $image = this._$image
+    setState($image, imageState)
+    $image.html(imageHtml)
+
+    return this
+  }
+  show() {
+    super.show()
+    if (this._observeElement) this._enableObserver()
+
+    return this.refresh()
+  }
+  hide() {
+    this._disableObserver()
+
+    return super.hide()
+  }
+  _initTpl() {
+    const $el = this._$el
+    $el.html(
+      c(`<div class="section local-storage"></div>
+      <div class="section session-storage"></div>
+      <div class="section cookie"></div>
+      <div class="section script"></div>
+      <div class="section stylesheet"></div>
+      <div class="section iframe"></div>
+      <div class="section image"></div>`)
+    )
+    this._$localStorage = $el.find(c('.local-storage'))
+    this._$sessionStorage = $el.find(c('.session-storage'))
+    this._$cookie = $el.find(c('.cookie'))
+    this._$script = $el.find(c('.script'))
+    this._$stylesheet = $el.find(c('.stylesheet'))
+    this._$iframe = $el.find(c('.iframe'))
+    this._$image = $el.find(c('.image'))
+  }
+  _bindEvent() {
+    const $el = this._$el
+    const container = this._container
+
+    $el
+      .on('click', '.eruda-refresh-script', () => {
+        container.notify('Refreshed', { icon: 'success' })
+        this.refreshScript()
+      })
+      .on('click', '.eruda-refresh-stylesheet', () => {
+        container.notify('Refreshed', { icon: 'success' })
+        this.refreshStylesheet()
+      })
+      .on('click', '.eruda-refresh-iframe', () => {
+        container.notify('Refreshed', { icon: 'success' })
+        this.refreshIframe()
+      })
+      .on('click', '.eruda-refresh-image', () => {
+        container.notify('Refreshed', { icon: 'success' })
+        this.refreshImage()
+      })
+      .on('click', '.eruda-img-link', function () {
+        const src = $(this).attr('src')
+
+        showSources('img', src)
+      })
+      .on('click', '.eruda-css-link', linkFactory('css'))
+      .on('click', '.eruda-js-link', linkFactory('js'))
+      .on('click', '.eruda-iframe-link', linkFactory('iframe'))
+
+    function showSources(type, data) {
+      const sources = container.get('sources')
+      if (!sources) return
+
+      sources.set(type, data)
+
+      container.showTool('sources')
+
+      return true
+    }
+
+    function linkFactory(type) {
+      return function (e) {
+        if (!container.get('sources')) return
+        e.preventDefault()
+
+        const url = $(this).attr('href')
+
+        if (type === 'iframe' || !sameOrigin(location.href, url)) {
+          showSources('iframe', url)
+        } else {
+          ajax({
+            url,
+            success: (data) => {
+              showSources(type, data)
+            },
+            dataType: 'raw',
+          })
+        }
+      }
+    }
+  }
+  _rmCfg() {
+    const cfg = this.config
+
+    const settings = this._container.get('settings')
+
+    if (!settings) return
+
+    settings
+      .remove(cfg, 'hideErudaSetting')
+      .remove(cfg, 'observeElement')
+      .remove('Resources')
+  }
+  _initCfg() {
+    const cfg = (this.config = Settings.createCfg('resources', {
+      hideErudaSetting: true,
+      observeElement: true,
+    }))
+
+    if (cfg.get('hideErudaSetting')) this._hideErudaSetting = true
+    if (!cfg.get('observeElement')) this._observeElement = false
+
+    cfg.on('change', (key, val) => {
+      switch (key) {
+        case 'hideErudaSetting':
+          this._hideErudaSetting = val
+          return
+        case 'observeElement':
+          this._observeElement = val
+          return val ? this._enableObserver() : this._disableObserver()
+      }
+    })
+
+    const settings = this._container.get('settings')
+    settings
+      .text('Resources')
+      .switch(cfg, 'hideErudaSetting', 'Hide Eruda Setting')
+      .switch(cfg, 'observeElement', 'Auto Refresh Elements')
+      .separator()
+  }
+  _initObserver() {
+    this._observer = new MutationObserver((mutations) => {
+      each(mutations, (mutation) => {
+        this._handleMutation(mutation)
+      })
+    })
+  }
+  _handleMutation(mutation) {
+    if (isErudaEl(mutation.target)) return
+
+    const checkEl = (el) => {
+      const tagName = getLowerCaseTagName(el)
+      switch (tagName) {
+        case 'script':
+          this.refreshScript()
+          break
+        case 'img':
+          this.refreshImage()
+          break
+        case 'link':
+          this.refreshStylesheet()
+          break
+      }
+    }
+
+    if (mutation.type === 'attributes') {
+      checkEl(mutation.target)
+    } else if (mutation.type === 'childList') {
+      checkEl(mutation.target)
+      let nodes = toArr(mutation.addedNodes)
+      nodes = concat(nodes, toArr(mutation.removedNodes))
+
+      for (const node of nodes) {
+        checkEl(node)
+      }
+    }
+  }
+  _enableObserver() {
+    this._observer.observe(document.documentElement, {
+      attributes: true,
+      childList: true,
+      subtree: true,
+    })
+  }
+  _disableObserver() {
+    this._observer.disconnect()
+  }
+}
+
+function getLowerCaseTagName(el) {
+  if (!el.tagName) return ''
+  return el.tagName.toLowerCase()
+}
+
+const regImg = /\.(jpeg|jpg|gif|png)$/
+
+const isImg = (url) => regImg.test(url)

src/Resources/Resources.scss

@@ -0,0 +1,87 @@
+@use '../style/variable' as *;
+@use '../style/mixin' as *;
+
+#resources {
+  @include overflow-auto(y);
+  padding: 10px;
+  font-size: 14px;
+  .section {
+    margin-bottom: 10px;
+    overflow: hidden;
+    border: 1px solid var(--border);
+    &.warn {
+      border: 1px solid var(--console-warn-border);
+      .title {
+        background: var(--console-warn-background);
+        color: var(--console-warn-foreground);
+      }
+    }
+    &.danger {
+      border: 1px solid var(--console-error-border);
+      .title {
+        background: var(--console-error-background);
+        color: var(--console-error-foreground);
+      }
+    }
+    &.local-storage,
+    &.session-storage,
+    &.cookie {
+      border: none;
+      .title {
+        border: 1px solid var(--border);
+        border-bottom: none;
+      }
+    }
+  }
+  .title {
+    padding: $padding;
+    line-height: 18px;
+    color: var(--primary);
+    background: var(--darker-background);
+    @include right-btn();
+  }
+  .link-list {
+    font-size: $font-size-s;
+    color: var(--foreground);
+    li {
+      padding: 10px;
+      word-break: break-all;
+      a {
+        color: var(--link-color) !important;
+      }
+    }
+  }
+  .image-list {
+    color: var(--foreground);
+    font-size: $font-size-s;
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: $padding;
+    padding-top: $padding;
+    &::after {
+      content: '';
+      flex-grow: 1000;
+    }
+    li {
+      flex-grow: 1;
+      cursor: pointer;
+      overflow-y: hidden;
+      margin-right: $padding;
+      margin-bottom: $padding;
+      border: 1px solid var(--border);
+      &.image {
+        height: 100px;
+        font-size: 0;
+      }
+      img {
+        height: 100px;
+        min-width: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+}
+
+.safe-area #resources {
+  @include safe-area(padding-bottom, 10px);
+}

src/Resources/Storage.js

@@ -0,0 +1,229 @@
+import each from 'licia/each'
+import isStr from 'licia/isStr'
+import startWith from 'licia/startWith'
+import truncate from 'licia/truncate'
+import LunaModal from 'luna-modal'
+import LunaDataGrid from 'luna-data-grid'
+import isNull from 'licia/isNull'
+import trim from 'licia/trim'
+import copy from 'licia/copy'
+import emitter from '../lib/emitter'
+import { safeStorage, classPrefix as c } from '../lib/util'
+
+export default class Storage {
+  constructor($container, devtools, resources, type) {
+    this._type = type
+    this._$container = $container
+    this._devtools = devtools
+    this._resources = resources
+    this._selectedItem = null
+    this._storeData = []
+
+    this._initTpl()
+    this._dataGrid = new LunaDataGrid(this._$dataGrid.get(0), {
+      columns: [
+        {
+          id: 'key',
+          title: 'Key',
+          weight: 30,
+        },
+        {
+          id: 'value',
+          title: 'Value',
+          weight: 90,
+        },
+      ],
+      minHeight: 60,
+      maxHeight: 223,
+    })
+
+    this._bindEvent()
+  }
+  destroy() {
+    emitter.off(emitter.SCALE, this._updateGridHeight)
+  }
+  refresh() {
+    const dataGrid = this._dataGrid
+
+    this._refreshStorage()
+    dataGrid.clear()
+
+    each(this._storeData, ({ key, val }) => {
+      dataGrid.append(
+        {
+          key,
+          value: val,
+        },
+        {
+          selectable: true,
+        }
+      )
+    })
+  }
+  _refreshStorage() {
+    const resources = this._resources
+
+    let store = safeStorage(this._type, false)
+
+    if (!store) return
+
+    const storeData = []
+
+    // Mobile safari is not able to loop through localStorage directly.
+    store = JSON.parse(JSON.stringify(store))
+
+    each(store, (val, key) => {
+      // According to issue 20, not all values are guaranteed to be string.
+      if (!isStr(val)) return
+
+      if (resources.config.get('hideErudaSetting')) {
+        if (startWith(key, 'eruda') || key === 'active-eruda') return
+      }
+
+      storeData.push({
+        key: key,
+        val: truncate(val, 200),
+      })
+    })
+
+    this._storeData = storeData
+  }
+  _updateButtons() {
+    const $container = this._$container
+    const $showDetail = $container.find(c('.show-detail'))
+    const $deleteStorage = $container.find(c('.delete-storage'))
+    const $copyStorage = $container.find(c('.copy-storage'))
+    const btnDisabled = c('btn-disabled')
+
+    $showDetail.addClass(btnDisabled)
+    $deleteStorage.addClass(btnDisabled)
+    $copyStorage.addClass(btnDisabled)
+
+    if (this._selectedItem) {
+      $showDetail.rmClass(btnDisabled)
+      $deleteStorage.rmClass(btnDisabled)
+      $copyStorage.rmClass(btnDisabled)
+    }
+  }
+  _initTpl() {
+    const $container = this._$container
+    const type = this._type
+
+    $container.html(
+      c(`<h2 class="title">
+      ${type === 'local' ? 'Local' : 'Session'} Storage
+      <div class="btn refresh-storage">
+        <span class="icon icon-refresh"></span>
+      </div>
+      <div class="btn show-detail btn-disabled">
+        <span class="icon icon-eye"></span>
+      </div>
+      <div class="btn copy-storage btn-disabled">
+        <span class="icon icon-copy"></span>
+      </div>
+      <div class="btn delete-storage btn-disabled">
+        <span class="icon icon-delete"></span>
+      </div>
+      <div class="btn clear-storage">
+        <span class="icon icon-clear"></span>
+      </div>
+      <div class="btn filter">
+        <span class="icon icon-filter"></span>
+      </div>
+      <div class="btn filter-text"></div>
+    </h2>
+    <div class="data-grid"></div>`)
+    )
+
+    this._$dataGrid = $container.find(c('.data-grid'))
+    this._$filterText = $container.find(c('.filter-text'))
+  }
+  _getVal(key) {
+    return this._type === 'local'
+      ? localStorage.getItem(key)
+      : sessionStorage.getItem(key)
+  }
+  _updateGridHeight = (scale) => {
+    this._dataGrid.setOption({
+      minHeight: 60 * scale,
+      maxHeight: 223 * scale,
+    })
+  }
+  _bindEvent() {
+    const type = this._type
+    const devtools = this._devtools
+
+    this._$container
+      .on('click', c('.refresh-storage'), () => {
+        devtools.notify('Refreshed', { icon: 'success' })
+        this.refresh()
+      })
+      .on('click', c('.clear-storage'), () => {
+        each(this._storeData, (val) => {
+          if (type === 'local') {
+            localStorage.removeItem(val.key)
+          } else {
+            sessionStorage.removeItem(val.key)
+          }
+        })
+        this.refresh()
+      })
+      .on('click', c('.show-detail'), () => {
+        const key = this._selectedItem
+        const val = this._getVal(key)
+
+        try {
+          showSources('object', JSON.parse(val))
+        } catch {
+          showSources('raw', val)
+        }
+      })
+      .on('click', c('.copy-storage'), () => {
+        const key = this._selectedItem
+        copy(this._getVal(key))
+        devtools.notify('Copied', { icon: 'success' })
+      })
+      .on('click', c('.filter'), () => {
+        LunaModal.prompt('Filter').then((filter) => {
+          if (isNull(filter)) return
+          filter = trim(filter)
+          this._$filterText.text(filter)
+          this._dataGrid.setOption('filter', filter)
+        })
+      })
+      .on('click', c('.delete-storage'), () => {
+        const key = this._selectedItem
+
+        if (type === 'local') {
+          localStorage.removeItem(key)
+        } else {
+          sessionStorage.removeItem(key)
+        }
+
+        this.refresh()
+      })
+
+    function showSources(type, data) {
+      const sources = devtools.get('sources')
+      if (!sources) return
+
+      sources.set(type, data)
+
+      devtools.showTool('sources')
+
+      return true
+    }
+
+    this._dataGrid
+      .on('select', (node) => {
+        this._selectedItem = node.data.key
+        this._updateButtons()
+      })
+      .on('deselect', () => {
+        this._selectedItem = null
+        this._updateButtons()
+      })
+
+    emitter.on(emitter.SCALE, this._updateGridHeight)
+  }
+}

src/Resources/util.js

@@ -0,0 +1,40 @@
+import { classPrefix as c } from '../lib/util'
+
+export function setState($el, state) {
+  $el
+    .rmClass(c('ok'))
+    .rmClass(c('danger'))
+    .rmClass(c('warn'))
+    .addClass(c(state))
+}
+
+export function getState(type, len) {
+  if (len === 0) return ''
+
+  let warn = 0
+  let danger = 0
+
+  switch (type) {
+    case 'cookie':
+      warn = 30
+      danger = 60
+      break
+    case 'script':
+      warn = 5
+      danger = 10
+      break
+    case 'stylesheet':
+      warn = 4
+      danger = 8
+      break
+    case 'image':
+      warn = 50
+      danger = 100
+      break
+  }
+
+  if (len >= danger) return 'danger'
+  if (len >= warn) return 'warn'
+
+  return 'ok'
+}

src/Settings/Settings.js

@@ -0,0 +1,150 @@
+import Tool from '../DevTools/Tool'
+import $ from 'licia/$'
+import LocalStore from 'licia/LocalStore'
+import uniqId from 'licia/uniqId'
+import each from 'licia/each'
+import filter from 'licia/filter'
+import isStr from 'licia/isStr'
+import contain from 'licia/contain'
+import clone from 'licia/clone'
+import evalCss from '../lib/evalCss'
+import LunaSetting from 'luna-setting'
+
+export default class Settings extends Tool {
+  constructor() {
+    super()
+
+    this._style = evalCss(require('./Settings.scss'))
+
+    this.name = 'settings'
+    this._settings = []
+  }
+  init($el) {
+    super.init($el)
+
+    this._setting = new LunaSetting($el.get(0))
+
+    this._bindEvent()
+  }
+  remove(config, key) {
+    if (isStr(config)) {
+      const self = this
+      this._$el.find('.luna-setting-item-title').each(function () {
+        const $this = $(this)
+        if ($this.text() === config) {
+          self._setting.remove(this.settingItem)
+        }
+      })
+    } else {
+      this._settings = filter(this._settings, (setting) => {
+        if (setting.config === config && setting.key === key) {
+          this._setting.remove(setting.item)
+          return false
+        }
+
+        return true
+      })
+    }
+
+    this._cleanSeparator()
+
+    return this
+  }
+  destroy() {
+    this._setting.destroy()
+    super.destroy()
+
+    evalCss.remove(this._style)
+  }
+  clear() {
+    this._settings = []
+    this._setting.clear()
+  }
+  switch(config, key, desc) {
+    const id = this._genId()
+
+    const item = this._setting.appendCheckbox(id, !!config.get(key), desc)
+    this._settings.push({ config, key, id, item })
+
+    return this
+  }
+  select(config, key, desc, selections) {
+    const id = this._genId()
+
+    const selectOptions = {}
+    each(selections, (selection) => (selectOptions[selection] = selection))
+    const item = this._setting.appendSelect(
+      id,
+      config.get(key),
+      '',
+      desc,
+      selectOptions
+    )
+    this._settings.push({ config, key, id, item })
+
+    return this
+  }
+  range(config, key, desc, { min = 0, max = 1, step = 0.1 }) {
+    const id = this._genId()
+
+    const item = this._setting.appendNumber(id, config.get(key), desc, {
+      max,
+      min,
+      step,
+      range: true,
+    })
+    this._settings.push({ config, key, min, max, step, id, item })
+
+    return this
+  }
+  button(text, handler) {
+    this._setting.appendButton(text, handler)
+
+    return this
+  }
+  separator() {
+    this._setting.appendSeparator()
+
+    return this
+  }
+  text(text) {
+    this._setting.appendTitle(text)
+
+    return this
+  }
+  // Merge adjacent separators
+  _cleanSeparator() {
+    const children = clone(this._$el.get(0).children)
+
+    function isSeparator(node) {
+      return contain(node.getAttribute('class'), 'luna-setting-item-separator')
+    }
+
+    for (let i = 0, len = children.length; i < len - 1; i++) {
+      if (isSeparator(children[i]) && isSeparator(children[i + 1])) {
+        $(children[i]).remove()
+      }
+    }
+  }
+  _genId() {
+    return uniqId('eruda-settings')
+  }
+  _getSetting(id) {
+    let ret
+
+    each(this._settings, (setting) => {
+      if (setting.id === id) ret = setting
+    })
+
+    return ret
+  }
+  _bindEvent() {
+    this._setting.on('change', (id, val) => {
+      const setting = this._getSetting(id)
+      setting.config.set(setting.key, val)
+    })
+  }
+  static createCfg(name, data) {
+    return new LocalStore('eruda-' + name, data)
+  }
+}

src/Settings/Settings.scss

@@ -0,0 +1,10 @@
+@use '../style/variable' as *;
+@use '../style/mixin' as *;
+
+#settings {
+  @include overflow-auto(y);
+}
+
+.safe-area #settings {
+  @include safe-area(padding-bottom, 0px);
+}

src/Snippets/Snippets.js

@@ -0,0 +1,99 @@
+import Tool from '../DevTools/Tool'
+import defSnippets from './defSnippets'
+import $ from 'licia/$'
+import each from 'licia/each'
+import escape from 'licia/escape'
+import map from 'licia/map'
+import remove from 'licia/remove'
+import evalCss from '../lib/evalCss'
+import { classPrefix as c } from '../lib/util'
+
+export default class Snippets extends Tool {
+  constructor() {
+    super()
+
+    this._style = evalCss(require('./Snippets.scss'))
+
+    this.name = 'snippets'
+
+    this._snippets = []
+  }
+  init($el) {
+    super.init($el)
+
+    this._bindEvent()
+    this._addDefSnippets()
+  }
+  destroy() {
+    super.destroy()
+
+    evalCss.remove(this._style)
+  }
+  add(name, fn, desc) {
+    this._snippets.push({ name, fn, desc })
+
+    this._render()
+
+    return this
+  }
+  remove(name) {
+    remove(this._snippets, (snippet) => snippet.name === name)
+
+    this._render()
+
+    return this
+  }
+  run(name) {
+    const snippets = this._snippets
+
+    for (let i = 0, len = snippets.length; i < len; i++) {
+      if (snippets[i].name === name) this._run(i)
+    }
+
+    return this
+  }
+  clear() {
+    this._snippets = []
+    this._render()
+
+    return this
+  }
+  _bindEvent() {
+    const self = this
+
+    this._$el.on('click', '.eruda-run', function () {
+      const idx = $(this).data('idx')
+
+      self._run(idx)
+    })
+  }
+  _run(idx) {
+    this._snippets[idx].fn.call(null)
+  }
+  _addDefSnippets() {
+    each(defSnippets, (snippet) => {
+      this.add(snippet.name, snippet.fn, snippet.desc)
+    })
+  }
+  _render() {
+    const html = map(this._snippets, (snippet, idx) => {
+      return `<div class="${c('section run')}" data-idx="${idx}">
+        <h2 class="${c('name')}">${escape(snippet.name)}
+          <div class="${c('btn')}">
+            <span class="${c('icon-play')}"></span>
+          </div>
+        </h2>
+        <div class="${c('description')}">
+          ${escape(snippet.desc)}
+        </div>
+      </div>`
+    }).join('')
+
+    this._renderHtml(html)
+  }
+  _renderHtml(html) {
+    if (html === this._lastHtml) return
+    this._lastHtml = html
+    this._$el.html(html)
+  }
+}

src/Snippets/Snippets.scss

@@ -0,0 +1,44 @@
+@use '../style/variable' as *;
+@use '../style/mixin' as *;
+
+#snippets {
+  @include overflow-auto(y);
+  padding: $padding;
+  .section {
+    margin-bottom: 10px;
+    border: 1px solid var(--border);
+    overflow: hidden;
+    cursor: pointer;
+    &:active {
+      .name {
+        background: var(--highlight);
+        color: var(--select-foreground);
+      }
+    }
+    .name {
+      padding: $padding;
+      line-height: 18px;
+      color: var(--primary);
+      background: var(--darker-background);
+      transition: background-color $anim-duration;
+      .btn {
+        margin-left: 10px;
+        float: right;
+        text-align: center;
+        width: 18px;
+        height: 18px;
+        font-size: $font-size-s;
+      }
+    }
+    .description {
+      font-size: $font-size-s;
+      color: var(--foreground);
+      padding: $padding;
+      transition: background-color $anim-duration;
+    }
+  }
+}
+
+.safe-area #snippets {
+  @include safe-area(padding-bottom, 10px);
+}

src/Snippets/defSnippets.js

@@ -0,0 +1,236 @@
+import logger from '../lib/logger'
+import emitter from '../lib/emitter'
+import Url from 'licia/Url'
+import now from 'licia/now'
+import startWith from 'licia/startWith'
+import $ from 'licia/$'
+import upperFirst from 'licia/upperFirst'
+import loadJs from 'licia/loadJs'
+import trim from 'licia/trim'
+import LunaModal from 'luna-modal'
+import { isErudaEl } from '../lib/util'
+import evalCss from '../lib/evalCss'
+
+let style = null
+
+export default [
+  {
+    name: 'Border All',
+    fn() {
+      if (style) {
+        evalCss.remove(style)
+        style = null
+        return
+      }
+
+      style = evalCss(
+        '* { outline: 2px dashed #707d8b; outline-offset: -3px; }',
+        document.head
+      )
+    },
+    desc: 'Add color borders to all elements',
+  },
+  {
+    name: 'Refresh Page',
+    fn() {
+      const url = new Url()
+      url.setQuery('timestamp', now())
+
+      window.location.replace(url.toString())
+    },
+    desc: 'Add timestamp to url and refresh',
+  },
+  {
+    name: 'Search Text',
+    fn() {
+      LunaModal.prompt('Enter the text').then((keyword) => {
+        if (!keyword || trim(keyword) === '') {
+          return
+        }
+
+        search(keyword)
+      })
+    },
+    desc: 'Highlight given text on page',
+  },
+  {
+    name: 'Edit Page',
+    fn() {
+      const body = document.body
+
+      body.contentEditable = body.contentEditable !== 'true'
+    },
+    desc: 'Toggle body contentEditable',
+  },
+  {
+    name: 'Fit Screen',
+    // https://achrafkassioui.com/birdview/
+    fn() {
+      const body = document.body
+      const html = document.documentElement
+      const $body = $(body)
+      if ($body.data('scaled')) {
+        window.scrollTo(0, +$body.data('scaled'))
+        $body.rmAttr('data-scaled')
+        $body.css('transform', 'none')
+      } else {
+        const documentHeight = Math.max(
+          body.scrollHeight,
+          body.offsetHeight,
+          html.clientHeight,
+          html.scrollHeight,
+          html.offsetHeight
+        )
+        const viewportHeight = Math.max(
+          document.documentElement.clientHeight,
+          window.innerHeight || 0
+        )
+        const scaleVal = viewportHeight / documentHeight
+        $body.css('transform', `scale(${scaleVal})`)
+        $body.data('scaled', window.scrollY)
+        window.scrollTo(0, documentHeight / 2 - viewportHeight / 2)
+      }
+    },
+    desc: 'Scale down the whole page to fit screen',
+  },
+  {
+    name: 'Load Vue Plugin',
+    fn() {
+      loadPlugin('vue')
+    },
+    desc: 'Vue devtools',
+  },
+  {
+    name: 'Load Monitor Plugin',
+    fn() {
+      loadPlugin('monitor')
+    },
+    desc: 'Display page fps, memory and dom nodes',
+  },
+  {
+    name: 'Load Features Plugin',
+    fn() {
+      loadPlugin('features')
+    },
+    desc: 'Browser feature detections',
+  },
+  {
+    name: 'Load Timing Plugin',
+    fn() {
+      loadPlugin('timing')
+    },
+    desc: 'Show performance and resource timing',
+  },
+  {
+    name: 'Load Code Plugin',
+    fn() {
+      loadPlugin('code')
+    },
+    desc: 'Edit and run JavaScript',
+  },
+  {
+    name: 'Load Benchmark Plugin',
+    fn() {
+      loadPlugin('benchmark')
+    },
+    desc: 'Run JavaScript benchmarks',
+  },
+  {
+    name: 'Load Geolocation Plugin',
+    fn() {
+      loadPlugin('geolocation')
+    },
+    desc: 'Test geolocation',
+  },
+  {
+    name: 'Load Orientation Plugin',
+    fn() {
+      loadPlugin('orientation')
+    },
+    desc: 'Test orientation api',
+  },
+  {
+    name: 'Load Touches Plugin',
+    fn() {
+      loadPlugin('touches')
+    },
+    desc: 'Visualize screen touches',
+  },
+]
+
+evalCss(require('./searchText.scss'), document.head)
+
+function search(text) {
+  const root = document.body
+  const regText = new RegExp(text, 'ig')
+
+  traverse(root, (node) => {
+    const $node = $(node)
+
+    if (!$node.hasClass('eruda-search-highlight-block')) return
+
+    return document.createTextNode($node.text())
+  })
+
+  traverse(root, (node) => {
+    if (node.nodeType !== 3) return
+
+    let val = node.nodeValue
+    val = val.replace(
+      regText,
+      (match) => `<span class="eruda-keyword">${match}</span>`
+    )
+    if (val === node.nodeValue) return
+
+    const $ret = $(document.createElement('div'))
+
+    $ret.html(val)
+    $ret.addClass('eruda-search-highlight-block')
+
+    return $ret.get(0)
+  })
+}
+
+function traverse(root, processor) {
+  const childNodes = root.childNodes
+
+  if (isErudaEl(root)) return
+
+  for (let i = 0, len = childNodes.length; i < len; i++) {
+    const newNode = traverse(childNodes[i], processor)
+    if (newNode) root.replaceChild(newNode, childNodes[i])
+  }
+
+  return processor(root)
+}
+
+function loadPlugin(name) {
+  const globalName = 'eruda' + upperFirst(name)
+  if (window[globalName]) return
+
+  let protocol = location.protocol
+  if (!startWith(protocol, 'http')) protocol = 'http:'
+
+  loadJs(
+    `${protocol}//cdn.jsdelivr.net/npm/eruda-${name}@${pluginVersion[name]}`,
+    (isLoaded) => {
+      if (!isLoaded || !window[globalName])
+        return logger.error('Fail to load plugin ' + name)
+
+      emitter.emit(emitter.ADD, window[globalName])
+      emitter.emit(emitter.SHOW, name)
+    }
+  )
+}
+
+const pluginVersion = {
+  monitor: '1.1.1',
+  features: '2.1.0',
+  timing: '2.0.1',
+  code: '2.2.0',
+  benchmark: '2.0.1',
+  geolocation: '2.1.0',
+  orientation: '2.1.1',
+  touches: '2.1.0',
+  vue: '1.1.1',
+}

src/Snippets/searchText.scss

@@ -0,0 +1,9 @@
+@use '../style/variable' as *;
+
+.search-highlight-block {
+  display: inline;
+  .keyword {
+    background: var(--console-warn-background);
+    color: var(--console-warn-foreground);
+  }
+}

src/Sources/Sources.js

@@ -0,0 +1,270 @@
+import Tool from '../DevTools/Tool'
+import LunaObjectViewer from 'luna-object-viewer'
+import Settings from '../Settings/Settings'
+import ajax from 'licia/ajax'
+import each from 'licia/each'
+import isStr from 'licia/isStr'
+import escape from 'licia/escape'
+import truncate from 'licia/truncate'
+import replaceAll from 'licia/replaceAll'
+import highlight from 'licia/highlight'
+import LunaTextViewer from 'luna-text-viewer'
+import evalCss from '../lib/evalCss'
+import { classPrefix as c } from '../lib/util'
+
+export default class Sources extends Tool {
+  constructor() {
+    super()
+
+    this._style = evalCss(require('./Sources.scss'))
+
+    this.name = 'sources'
+    this._showLineNum = true
+  }
+  init($el, container) {
+    super.init($el)
+
+    this._container = container
+    this._bindEvent()
+    this._initCfg()
+  }
+  destroy() {
+    super.destroy()
+
+    evalCss.remove(this._style)
+    this._rmCfg()
+  }
+  set(type, val) {
+    if (type === 'img') {
+      this._isFetchingData = true
+
+      const img = new Image()
+
+      const self = this
+
+      img.onload = function () {
+        self._isFetchingData = false
+        self._data = {
+          type: 'img',
+          val: {
+            width: this.width,
+            height: this.height,
+            src: val,
+          },
+        }
+
+        self._render()
+      }
+      img.onerror = function () {
+        self._isFetchingData = false
+      }
+
+      img.src = val
+
+      return
+    }
+
+    this._data = { type, val }
+
+    this._render()
+
+    return this
+  }
+  show() {
+    super.show()
+
+    if (!this._data && !this._isFetchingData) {
+      this._renderDef()
+    }
+
+    return this
+  }
+  _renderDef() {
+    if (this._html) {
+      this._data = {
+        type: 'html',
+        val: this._html,
+      }
+
+      return this._render()
+    }
+
+    if (this._isGettingHtml) return
+    this._isGettingHtml = true
+
+    ajax({
+      url: location.href,
+      success: (data) => (this._html = data),
+      error: () => (this._html = 'Sorry, unable to fetch source code:('),
+      complete: () => {
+        this._isGettingHtml = false
+        this._renderDef()
+      },
+      dataType: 'raw',
+    })
+  }
+  _bindEvent() {
+    this._container.on('showTool', (name, lastTool) => {
+      if (name !== this.name && lastTool.name === this.name) {
+        delete this._data
+      }
+    })
+  }
+  _rmCfg() {
+    const cfg = this.config
+
+    const settings = this._container.get('settings')
+
+    if (!settings) return
+
+    settings.remove(cfg, 'showLineNum').remove('Sources')
+  }
+  _initCfg() {
+    const cfg = (this.config = Settings.createCfg('sources', {
+      showLineNum: true,
+    }))
+
+    if (!cfg.get('showLineNum')) this._showLineNum = false
+
+    cfg.on('change', (key, val) => {
+      switch (key) {
+        case 'showLineNum':
+          this._showLineNum = val
+          return
+      }
+    })
+
+    const settings = this._container.get('settings')
+    settings
+      .text('Sources')
+      .switch(cfg, 'showLineNum', 'Show Line Numbers')
+      .separator()
+  }
+  _render() {
+    this._isInit = true
+
+    const data = this._data
+
+    switch (data.type) {
+      case 'html':
+      case 'js':
+      case 'css':
+        return this._renderCode()
+      case 'img':
+        return this._renderImg()
+      case 'object':
+        return this._renderObj()
+      case 'raw':
+        return this._renderRaw()
+      case 'iframe':
+        return this._renderIframe()
+    }
+  }
+  _renderImg() {
+    const { width, height, src } = this._data.val
+
+    this._renderHtml(`<div class="${c('image')}">
+      <div class="${c('breadcrumb')}">${escape(src)}</div>
+      <div class="${c('img-container')}" data-exclude="true">
+        <img src="${escape(src)}">
+      </div>
+      <div class="${c('img-info')}">${escape(width)} × ${escape(height)}</div>
+    </div>`)
+  }
+  _renderCode() {
+    const data = this._data
+
+    this._renderHtml(
+      `<div class="${c('code')}" data-type="${data.type}"></div>`,
+      false
+    )
+
+    let code = data.val
+    const len = data.val.length
+
+    if (len > MAX_RAW_LEN) {
+      code = truncate(code, MAX_RAW_LEN)
+    }
+
+    // If source code too big, don't process it.
+    if (len < MAX_BEAUTIFY_LEN) {
+      code = highlight(code, data.type, {
+        comment: '',
+        string: '',
+        number: '',
+        keyword: '',
+        operator: '',
+      })
+      each(['comment', 'string', 'number', 'keyword', 'operator'], (type) => {
+        code = replaceAll(code, `class="${type}"`, `class="${c(type)}"`)
+      })
+    } else {
+      code = escape(code)
+    }
+
+    const container = this._$el.find(c('.code')).get(0)
+    new LunaTextViewer(container, {
+      text: code,
+      escape: false,
+      wrapLongLines: true,
+      showLineNumbers: data.val.length < MAX_LINE_NUM_LEN && this._showLineNum,
+    })
+  }
+  _renderObj() {
+    // Using cache will keep binding events to the same elements.
+    this._renderHtml(`<ul class="${c('json')}"></ul>`, false)
+
+    let val = this._data.val
+
+    try {
+      if (isStr(val)) {
+        val = JSON.parse(val)
+      }
+    } catch {
+      // No op
+    }
+
+    const objViewer = new LunaObjectViewer(
+      this._$el.find('.eruda-json').get(0),
+      {
+        unenumerable: true,
+        accessGetter: true,
+        prototype: false,
+      }
+    )
+    objViewer.set(val)
+  }
+  _renderRaw() {
+    const data = this._data
+
+    this._renderHtml(`<div class="${c('raw-wrapper')}">
+      <div class="${c('raw')}"></div>
+    </div>`)
+
+    let val = data.val
+    const container = this._$el.find(c('.raw')).get(0)
+    if (val.length > MAX_RAW_LEN) {
+      val = truncate(val, MAX_RAW_LEN)
+    }
+
+    new LunaTextViewer(container, {
+      text: val,
+      wrapLongLines: true,
+      showLineNumbers: val.length < MAX_LINE_NUM_LEN && this._showLineNum,
+    })
+  }
+  _renderIframe() {
+    this._renderHtml(`<iframe src="${escape(this._data.val)}"></iframe>`)
+  }
+  _renderHtml(html, cache = true) {
+    if (cache && html === this._lastHtml) return
+    this._lastHtml = html
+    this._$el.html(html)
+    // Need setTimeout to make it work
+    setTimeout(() => (this._$el.get(0).scrollTop = 0), 0)
+  }
+}
+
+const MAX_BEAUTIFY_LEN = 30000
+const MAX_LINE_NUM_LEN = 80000
+const MAX_RAW_LEN = 100000

src/Sources/Sources.scss

@@ -0,0 +1,65 @@
+@use '../style/variable' as *;
+@use '../style/mixin' as *;
+
+#sources {
+  font-size: 0;
+  @include overflow-auto(y);
+  color: var(--foreground);
+  .code-wrapper,
+  .raw-wrapper {
+    @include overflow-auto(x);
+    width: 100%;
+    min-height: 100%;
+  }
+  .raw,
+  .code {
+    height: 100%;
+    .keyword {
+      color: var(--keyword-color);
+    }
+    .comment {
+      color: var(--comment-color);
+    }
+    .number {
+      color: var(--number-color);
+    }
+    .string {
+      color: var(--string-color);
+    }
+    .operator {
+      color: var(--operator-color);
+    }
+    &[data-type='html'] {
+      .keyword {
+        color: var(--tag-name-color);
+      }
+    }
+  }
+  .image {
+    font-size: $font-size-s;
+    .breadcrumb {
+      @include breadcrumb();
+    }
+    .img-container {
+      text-align: center;
+      img {
+        max-width: 100%;
+      }
+    }
+    .img-info {
+      text-align: center;
+      margin: 20px 0;
+      color: var(--foreground);
+    }
+  }
+  .json {
+    padding: 0 $padding;
+    * {
+      user-select: text;
+    }
+  }
+  iframe {
+    width: 100%;
+    height: 100%;
+  }
+}

src/eruda.js

@@ -0,0 +1,322 @@
+import EntryBtn from './EntryBtn/EntryBtn'
+import DevTools from './DevTools/DevTools'
+import Tool from './DevTools/Tool'
+import Console from './Console/Console'
+import Network from './Network/Network'
+import Elements from './Elements/Elements'
+import Snippets from './Snippets/Snippets'
+import Resources from './Resources/Resources'
+import Info from './Info/Info'
+import Sources from './Sources/Sources'
+import Settings from './Settings/Settings'
+import emitter from './lib/emitter'
+import logger from './lib/logger'
+import * as util from './lib/util'
+import { isDarkTheme } from './lib/themes'
+import themes from './lib/themes'
+import isFn from 'licia/isFn'
+import isNum from 'licia/isNum'
+import isObj from 'licia/isObj'
+import each from 'licia/each'
+import isMobile from 'licia/isMobile'
+import viewportScale from 'licia/viewportScale'
+import detectBrowser from 'licia/detectBrowser'
+import $ from 'licia/$'
+import toArr from 'licia/toArr'
+import upperFirst from 'licia/upperFirst'
+import nextTick from 'licia/nextTick'
+import isEqual from 'licia/isEqual'
+import extend from 'licia/extend'
+import evalCss from './lib/evalCss'
+import chobitsu from './lib/chobitsu'
+
+export default {
+  init({
+    container,
+    tool,
+    autoScale = true,
+    useShadowDom = true,
+    inline = false,
+    defaults = {},
+  } = {}) {
+    if (this._isInit) {
+      return
+    }
+
+    this._isInit = true
+    this._scale = 1
+
+    this._initContainer(container, useShadowDom)
+    this._initStyle()
+    this._initDevTools(defaults, inline)
+    this._initEntryBtn()
+    this._initSettings()
+    this._initTools(tool)
+    this._registerListener()
+
+    if (autoScale) {
+      this._autoScale()
+    }
+    if (inline) {
+      this._entryBtn.hide()
+      this._$el.addClass('eruda-inline')
+      this.show()
+    }
+  },
+  _isInit: false,
+  version: VERSION,
+  util: {
+    isErudaEl: util.isErudaEl,
+    evalCss,
+    isDarkTheme(theme) {
+      if (!theme) {
+        theme = this.getTheme()
+      }
+      return isDarkTheme(theme)
+    },
+    getTheme: () => {
+      const curTheme = evalCss.getCurTheme()
+
+      let result = 'Light'
+      each(themes, (theme, name) => {
+        if (isEqual(theme, curTheme)) {
+          result = name
+        }
+      })
+
+      return result
+    },
+  },
+  chobitsu,
+  Tool,
+  Console,
+  Elements,
+  Network,
+  Sources,
+  Resources,
+  Info,
+  Snippets,
+  Settings,
+  get(name) {
+    if (!this._checkInit()) return
+
+    if (name === 'entryBtn') return this._entryBtn
+
+    const devTools = this._devTools
+
+    return name ? devTools.get(name) : devTools
+  },
+  add(tool) {
+    if (!this._checkInit()) return
+
+    if (isFn(tool)) tool = tool(this)
+
+    this._devTools.add(tool)
+
+    return this
+  },
+  remove(name) {
+    this._devTools.remove(name)
+
+    return this
+  },
+  show(name) {
+    if (!this._checkInit()) return
+
+    const devTools = this._devTools
+
+    name ? devTools.showTool(name) : devTools.show()
+
+    return this
+  },
+  hide() {
+    if (!this._checkInit()) return
+
+    this._devTools.hide()
+
+    return this
+  },
+  destroy() {
+    this._devTools.destroy()
+    delete this._devTools
+    this._entryBtn.destroy()
+    delete this._entryBtn
+    this._unregisterListener()
+    $(this._container).remove()
+    evalCss.clear()
+    this._isInit = false
+    this._container = null
+    this._shadowRoot = null
+  },
+  scale(s) {
+    if (isNum(s)) {
+      this._scale = s
+      emitter.emit(emitter.SCALE, s)
+      return this
+    }
+
+    return this._scale
+  },
+  position(p) {
+    const entryBtn = this._entryBtn
+
+    if (isObj(p)) {
+      entryBtn.setPos(p)
+      return this
+    }
+
+    return entryBtn.getPos()
+  },
+  _autoScale() {
+    if (!isMobile()) return
+
+    this.scale(1 / viewportScale())
+  },
+  _registerListener() {
+    this._addListener = (...args) => this.add(...args)
+    this._showListener = (...args) => this.show(...args)
+
+    emitter.on(emitter.ADD, this._addListener)
+    emitter.on(emitter.SHOW, this._showListener)
+    emitter.on(emitter.SCALE, evalCss.setScale)
+  },
+  _unregisterListener() {
+    emitter.off(emitter.ADD, this._addListener)
+    emitter.off(emitter.SHOW, this._showListener)
+    emitter.off(emitter.SCALE, evalCss.setScale)
+  },
+  _checkInit() {
+    if (!this._isInit) logger.error('Please call "eruda.init()" first')
+    return this._isInit
+  },
+  _initContainer(container, useShadowDom) {
+    if (!container) {
+      container = document.createElement('div')
+      document.documentElement.appendChild(container)
+    }
+
+    container.id = 'eruda'
+    container.style.all = 'initial'
+    this._container = container
+
+    let shadowRoot
+    let el
+    if (useShadowDom) {
+      if (container.attachShadow) {
+        shadowRoot = container.attachShadow({ mode: 'open' })
+      } else if (container.createShadowRoot) {
+        shadowRoot = container.createShadowRoot()
+      }
+      if (shadowRoot) {
+        // font-face doesn't work inside shadow dom.
+        evalCss.container = document.head
+        evalCss(
+          require('./style/icon.css') +
+            require('luna-console/luna-console.css') +
+            require('luna-object-viewer/luna-object-viewer.css') +
+            require('luna-dom-viewer/luna-dom-viewer.css') +
+            require('luna-text-viewer/luna-text-viewer.css') +
+            require('luna-notification/luna-notification.css')
+        )
+
+        el = document.createElement('div')
+        shadowRoot.appendChild(el)
+        this._shadowRoot = shadowRoot
+      }
+    }
+
+    if (!this._shadowRoot) {
+      el = document.createElement('div')
+      container.appendChild(el)
+    }
+
+    extend(el, {
+      className: 'eruda-container __chobitsu-hide__',
+      contentEditable: false,
+    })
+
+    // http://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari
+    if (detectBrowser().name === 'ios') el.setAttribute('ontouchstart', '')
+
+    this._$el = $(el)
+  },
+  _initDevTools(defaults, inline) {
+    this._devTools = new DevTools(this._$el, {
+      defaults,
+      inline,
+    })
+  },
+  _initStyle() {
+    const className = 'eruda-style-container'
+    const $el = this._$el
+
+    if (this._shadowRoot) {
+      evalCss.container = this._shadowRoot
+      evalCss(':host { all: initial }')
+    } else {
+      $el.append(`<div class="${className}"></div>`)
+      evalCss.container = $el.find(`.${className}`).get(0)
+    }
+
+    evalCss(
+      require('./style/reset.scss') +
+        require('luna-object-viewer/luna-object-viewer.css') +
+        require('luna-console/luna-console.css') +
+        require('luna-notification/luna-notification.css') +
+        require('luna-data-grid/luna-data-grid.css') +
+        require('luna-dom-viewer/luna-dom-viewer.css') +
+        require('luna-modal/luna-modal.css') +
+        require('luna-tab/luna-tab.css') +
+        require('luna-text-viewer/luna-text-viewer.css') +
+        require('luna-setting/luna-setting.css') +
+        require('luna-box-model/luna-box-model.css') +
+        require('./style/style.scss') +
+        require('./style/icon.css')
+    )
+  },
+  _initEntryBtn() {
+    this._entryBtn = new EntryBtn(this._$el)
+    this._entryBtn.on('click', () => this._devTools.toggle())
+  },
+  _initSettings() {
+    const devTools = this._devTools
+    const settings = new Settings()
+
+    devTools.add(settings)
+
+    this._entryBtn.initCfg(settings)
+    devTools.initCfg(settings)
+  },
+  _initTools(
+    tool = [
+      'console',
+      'elements',
+      'network',
+      'resources',
+      'sources',
+      'info',
+      'snippets',
+    ]
+  ) {
+    tool = toArr(tool)
+
+    const devTools = this._devTools
+
+    tool.forEach((name) => {
+      const Tool = this[upperFirst(name)]
+      try {
+        if (Tool) devTools.add(new Tool())
+      } catch (e) {
+        // Use nextTick to make sure it is possible to be caught by console panel.
+        nextTick(() => {
+          logger.error(
+            `Something wrong when initializing tool ${name}:`,
+            e.message
+          )
+        })
+      }
+    })
+
+    devTools.showTool(tool[0] || 'settings')
+  },
+}