亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue如何禁止打開(kāi)調(diào)試模式方法

 更新時(shí)間:2024年06月06日 15:40:42   作者:object(index)  
這篇文章主要介紹了vue如何禁止打開(kāi)調(diào)試模式方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

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)文章

  • 淺談vuex actions和mutation的異曲同工

    淺談vuex actions和mutation的異曲同工

    這篇文章主要介紹了淺談vuex actions和mutation的異曲同工 ,詳細(xì)的介紹了actions和mutation的使用和區(qū)別,非常具有實(shí)用價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2018-12-12
  • vue+Vue Router多級(jí)側(cè)導(dǎo)航切換路由(頁(yè)面)的實(shí)現(xià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-12
  • Vue組件層級(jí)關(guān)系詳細(xì)分析

    Vue組件層級(jí)關(guān)系詳細(xì)分析

    這篇文章主要介紹了Vue組件的層級(jí)關(guān)系,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • Nuxt.js之自動(dòng)路由原理的實(shí)現(xiàn)方法

    Nuxt.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-11
  • vue再次進(jìn)入頁(yè)面不會(huì)再次調(diào)用接口請(qǐng)求問(wèn)題

    vue再次進(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-08
  • vue-router報(bào)錯(cuò):uncaught error during route navigati問(wèn)題及解決

    vue-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-06
  • Vue實(shí)現(xiàn)菜單切換功能

    Vue實(shí)現(xiàn)菜單切換功能

    這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)菜單切換功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-11-11
  • Console高級(jí)用法總結(jié)

    Console高級(jí)用法總結(jié)

    Console 對(duì)象提供了瀏覽器控制臺(tái)調(diào)試的接口。在不同宿主環(huán)境上它的工作方式可能不一樣,但通常都會(huì)提供一套共性的功能,本文主要總結(jié)了Console的一些高級(jí)用法,感興趣的小伙伴可以參考一下
    2023-04-04
  • Vue組件間通信 Vuex的用法解析

    Vue組件間通信 Vuex的用法解析

    這篇文章主要介紹了Vue組件間通信-Vuex,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-08-08
  • vue+element表格實(shí)現(xiàn)多層數(shù)據(jù)的嵌套方式

    vue+element表格實(shí)現(xiàn)多層數(shù)據(jù)的嵌套方式

    這篇文章主要介紹了vue+element表格實(shí)現(xiàn)多層數(shù)據(jù)的嵌套方式,具有很好的參考價(jià)值。希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09

最新評(píng)論