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 擴展