chrome：插件、跨域、调试....

chrome 调试小技巧

ctrl+shift+c 打开chrome的控制台选中一个元素，然后在控制台输入$0即可获取选中的元素，就可以对其进行操作了。

$0.addEventListener(...);
$0.onclick=()=>console.log('...');

cross-env 跨平台使用环境变量

{
  "scripts": {
    ...,
    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
  }
}

从React的$r对象上索引到store

使用React Developer Tools，控制台切换地产react工具选择store节点的组件标签，$r.store即可获取redux中的数据。

dev中组件同过Connect(ListTable)连接到redux的，就选择这个包裹后的组件，$r.store.getState()即可获取redux中的数据。

http://ju.outofmemory.cn/entry/344147

chrome本地覆盖功能 local overrides 用于线上bug调试

跨域插件

跨域插件-XSwitch https://github.com/yize/xswitch

清空host缓存

清空host缓存 chrome://net-internals/#modules 右上角下拉菜单选择Flush sockets

快捷切换host地址

HostAdmin App

更改页面样式

Stylus

主题 Global dark style - everything to DARK 2018

自动格式化json

JSONview

FeHelper

划词翻译

超好用的快捷翻译插件 划词翻译

react开发插件

React Developer Tools

redux-devtools-extension

优化组件

React Perf (React 15)

React Performance Devtool (React 16)

使用工具查看组件渲染性能，视频下方介绍中有说明

统一文章格式阅读

简阅

github代码目录生成

octotree

VScode config

{
    "editor.fontSize": 14,
    "editor.fontLigatures": true,
    "editor.fontFamily": "Fira Code",
    "workbench.iconTheme": "vscode-icons",
    "workbench.colorTheme": "Dracula Soft", // Solarized Dark
    // 粘贴内容的自动格式化
    "editor.formatOnPaste": false,
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.snippetSuggestions": "top",
    "vsicons.projectDetection.autoReload": true,
    //react JSX语法里面的html提示
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
    "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
    "workbench.statusBar.feedback.visible": false,
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
    },
    "files.associations": {
        "*.vue": "vue"
    },
    "editor.tabSize": 4,
    "window.zoomLevel": 0,
    "sync.gist": "98927d759b86d981aeda2bd0f29c9a69",
    "sync.host": "",
    "sync.pathPrefix": "",
    "sync.quietSync": false,
    "sync.askGistName": false,
    "sync.removeExtensions": true,
    "sync.syncExtensions": true,
    "sync.autoDownload": false,
    "sync.autoUpload": false,
    "sync.lastUpload": "2018-08-18T11:16:27.924Z",
    "sync.lastDownload": "",
    "sync.forceDownload": false,
    // rc-beautify
    "rc-beautify": {
      "insize": 4,
      "inchar": " ",
      "bracepadding": false,
      "wrap": 80
    },
    "editor.autoIndent": false,
    "workbench.startupEditor": "newUntitledFile",
    "editor.formatOnSave": false,
    // 启用后，将在保存文件时剪裁尾随空格
    "files.trimTrailingWhitespace": true,
    // 启用后，保存文件时将删除在最终新行后的所有新行。
    "files.trimFinalNewlines": true,
    "editor.detectIndentation": false,
    // 对修饰器的实验支持是一项将在将来版本中更改的功能。设置+"experimentalDecorators"+选项以删除此警告。
    "javascript.implicitProjectConfig.experimentalDecorators": true,
    "search.location": "panel",
    "eslint.options": {
        // "configFile": "E:/YMSD/eslint/.eslintrc.js"
    },
    "vsicons.dontShowNewVersionMessage": true,
    "diffEditor.ignoreTrimWhitespace": false,
    "javascript.updateImportsOnFileMove.enabled": "always",
  }

VScode 扩展