feat(debug-server): change chrome dev protocal for Elements tab

README.md

@@ -79,7 +79,7 @@ Before build the android app, please make sure the SDK and NDK is installed, And
 1. Follow [Build the iOS simulator with js demo](https://github.com/Tencent/Hippy#build-the-ios-simulator-with-js-demo) or [Build the Android app with js demo](https://github.com/Tencent/Hippy#build-the-android-app-with-js-demo) first to build the App.
 2. `cd` to `examples` hippy-react-demo or hippy-vue-demo.
 3. Run `npm install` to install demo js dependencies.
-4. Run `npm run hippy:dev` and `npm run hippy:debug` respectively to start the live debug mode.
+4. Run `npm run hippy:dev` and `npm run hippy:debug` (`npm run hippy:local-debug` will link to source code in packages) respectively to start the live debug mode.
 
 > On example debug mode, npm packages such as @hippy/react, @hippy/vue are linked to `packages` > `[different package]` > `dist`(not node_modules), so if you have changed js package source code and want to make it take effect in target example, please call `npm run build` at root directory again.
 >

README.zh_CN.md

@@ -79,7 +79,7 @@ Windows 用户者需要以下软件:
 1. 先按照 **[使用 JS 范例来构建 iOS App]** 和 **[使用 JS 范例来构建 Android App]** 步骤执行。
 2. `cd` 到 `examples` hippy-react-demo 或者 hippy-vue-demo 目录。
 3. 执行 `npm install` 安装相应 js demo 的依赖包。
-4. 分别执行 `npm run hippy:dev` 和 `npm run hippy:debug` 来开启实时 Debug 模式。
+4. 分别执行 `npm run hippy:dev` 和 `npm run hippy:debug`(`npm run hippy:local-debug` 会调用 packages 下的源码) 来开启实时 Debug 模式。
 
 > 在 example 调试模式下，@hippy/react、@hippy/vue 等 npm 模块会直接链接到 `packages` > `[different package]` > `dist` 目录下面的 js 文件(非 node_modules)，所以如果你修改了 packages 下的 JS 源代码并且想让其在 example 中生效，请重新在根目录执行 `npm run build`。
 >

examples/hippy-react-demo/package.json

@@ -10,6 +10,7 @@
   "scripts": {
     "serve": "webpack-dev-server --mode=development --config ./scripts/hippy-webpack.web.js",
     "build": "webpack --mode=production --config ./scripts/hippy-webpack.web.js",
+    "hippy:local-debug": "node ../../packages/hippy-debug-server/index.js",
     "hippy:debug": "hippy-debug",
     "hippy:dev": "webpack --config ./scripts/hippy-webpack.dev.js",
     "hippy:vendor": "webpack --config ./scripts/hippy-webpack.ios-vendor.js --config ./scripts/hippy-webpack.android-vendor.js",

examples/hippy-vue-demo/package.json

@@ -12,6 +12,7 @@
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
+    "hippy:local-debug": "node ../../packages/hippy-debug-server/index.js",
     "hippy:debug": "hippy-debug",
     "hippy:dev": "webpack --config ./scripts/hippy-webpack.dev.js",
     "hippy:vendor": "webpack --config ./scripts/hippy-webpack.ios-vendor.js --config ./scripts/hippy-webpack.android-vendor.js",
@@ -21,7 +22,7 @@
     "@hippy/vue": "^2.1.2",
     "@hippy/vue-native-components": "^2.0.1",
     "@hippy/vue-router": "^2.0.1",
-    "core-js": "^3.4.3",
+    "core-js": "3.11.0",
     "vue": "^2.6.10",
     "vue-router": "^3.1.3"
   },
@@ -46,6 +47,7 @@
     "babel-eslint": "^10.0.3",
     "babel-loader": "^8.1.0",
     "case-sensitive-paths-webpack-plugin": "^2.2.0",
+    "css-loader": "^5.2.7",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
     "less-loader": "^7.1.0",

packages/hippy-debug-server/server/index.js

@@ -23,11 +23,11 @@ async function startDevServer(args) {
   const versionReturn = '{"Browser": "Hippy/v1.0.0","Protocol-Version": "1.1"}';
   const jsonReturn = JSON.stringify([{
     description: 'hippy instance',
-    devtoolsFrontendUrl: `chrome-devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=${host}:${port}/debugger-proxy?role=chrome`,
+    devtoolsFrontendUrl: `chrome-devtools://devtools/bundled/js_app.html?experiments=true&ws=${host}:${port}/debugger-proxy?role=chrome`,
     devtoolsFrontendUrlCompat: `chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=${host}:${port}/debugger-proxy?role=chrome`,
     faviconUrl: 'http://res.imtt.qq.com/hippydoc/img/hippy-logo.ico',
     title: 'Hippy debug tools for V8',
-    type: 'node',
+    type: 'page',
     url: '',
     webSocketDebuggerUrl: `ws://${host}:${port}/debugger-proxy?role=chrome`,
   }]);

packages/types/global.ts

@@ -2,7 +2,7 @@ import WebSocket from '../hippy-react/src/modules/websocket';
 import Hippy from './hippy';
 
 declare namespace NodeJS {
-  interface Global {
+  export interface Global {
     __PLATFORM__: string;
     __GLOBAL__: {
       nodeId: number;
@@ -31,3 +31,4 @@ declare namespace NodeJS {
     WebSocket: WebSocket;
   }
 }
+export default NodeJS;