vue如何禁止打開(kāi)調(diào)試模式方法
vue禁止打開(kāi)調(diào)試模式
//在app.vue添加一下代碼 <template> <div id="app"> <router-view></router-view> </div> </template>
<script> export default { name: "App", data() { return {}; }, methods:{ }, mounted() { if (process.env.mode === 'production') { (function noDebugger() { function testDebugger() { var d = new Date(); debugger; if (new Date() - d > 10) { document.body.innerHTML = '<div>管理員已禁用調(diào)試模式!!!年輕人,不要太好奇</div>'; alert("管理員已禁用調(diào)試模式") return true; } return false; } function start() { while (testDebugger()) { testDebugger(); } } if (!testDebugger()) { window.onblur = function () { setTimeout(function () { start(); }, 500); }; } else { start(); } })(); } }, }; </script>
<style> #app { /* font-family: Avenir, Helvetica, Arial, sans-serif; */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; /* width: 100vw; */ height: 100vh; overflow: hidden; box-sizing: border-box; } </style>
vue提供的三種調(diào)試方式
一、在 VS Code 中配置調(diào)試
使用 Vue CLI 2搭建項(xiàng)目時(shí):
更新 config/index.js 內(nèi)的 devtool property:
devtool: 'source-map',
點(diǎn)擊在 Activity Bar 里的 Debugger 圖標(biāo)來(lái)到 Debug 視圖:
選擇 Chrome/Firefox:Launch 環(huán)境。
將 launch.json 的內(nèi)容替換為:
{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "vuejs: chrome", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}/src", "breakOnLoad": true, "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" } }, { "type": "firefox", "request": "launch", "name": "vuejs: firefox", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}/src", "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }] } ] }
開(kāi)始調(diào)試:
設(shè)置斷點(diǎn):
#啟動(dòng)項(xiàng)目npm run dev
在debug頁(yè)面選擇“vuejs:chrome”:
二、debugger語(yǔ)句
推薦?。。。。。。?!
function potentiallyBuggyCode() { debugger // do potentially buggy stuff to examine, step through, etc. }
瀏覽器:F12打開(kāi)DevTools,當(dāng)運(yùn)行程序后,會(huì)停在debbger語(yǔ)句:
注意:
當(dāng)安裝了Eslint插件時(shí),點(diǎn)擊快速修復(fù),Disable no-debugger for this line.
不然,保存時(shí)會(huì)自動(dòng)清除debugger語(yǔ)句。
三、Vue Devtools
谷歌瀏覽器的插件。
詳情參考官方鏈接:https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html#Vue-Devtools
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue+Vue Router多級(jí)側(cè)導(dǎo)航切換路由(頁(yè)面)的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue+Vue Router多級(jí)側(cè)導(dǎo)航切換路由(頁(yè)面)的實(shí)現(xiàn)代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12Nuxt.js之自動(dòng)路由原理的實(shí)現(xiàn)方法
這篇文章主要介紹了Nuxt.js之自動(dòng)路由原理的實(shí)現(xiàn)方法,nuxt.js會(huì)根據(jù)pages目錄結(jié)構(gòu)自動(dòng)生成vue-router模塊的路由配置。非常具有實(shí)用價(jià)值,需要的朋友可以參考下2018-11-11vue再次進(jìn)入頁(yè)面不會(huì)再次調(diào)用接口請(qǐng)求問(wèn)題
這篇文章主要介紹了vue再次進(jìn)入頁(yè)面不會(huì)再次調(diào)用接口請(qǐng)求問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08vue-router報(bào)錯(cuò):uncaught error during route 
這篇文章主要介紹了vue-router報(bào)錯(cuò):uncaught error during route navigati問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06vue+element表格實(shí)現(xiàn)多層數(shù)據(jù)的嵌套方式
這篇文章主要介紹了vue+element表格實(shí)現(xiàn)多層數(shù)據(jù)的嵌套方式,具有很好的參考價(jià)值。希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09