前端vue代码如何调试？
Posted Roam-G
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端vue代码如何调试？相关的知识，希望对你有一定的参考价值。
解决方法:
在想要调试的方法中加入debugger;
findOrderList ()
this.tableData = [];
debugger;
let params = this.conditionForm;
使用谷歌浏览器，F12，点击 页面调用方法，
代码运行到 debugger所在位置，按F10一步一步运行代码，右侧本地，可以查看对应的参数，想要结束调试按F8直接运行结束。
这样比console.log方便、直观、全面。
<template>
<div class="DownloadConfigList_div">
<div class="scroll-float-fixed">
<ul class="ptb5">
<li class="tableulli bold fsize14 mt15">
<ul>
<li class="pct5">
ID
</li>
<li class="pct20">
上午禁止下载时间开始
</li>
<li class="pct5" style="text-align: center;">
上午禁止下载时间截止
</li>
<li class="pct15" style="text-align: center;">
下午禁止下载时间开始
</li>
<li class="pct5" style="text-align: center;">
上午禁止下载时间截止
</li>
<li class="pct15" style="text-align: center;">
最大下载量
</li>
<li class="pct15" style="text-align: center;">
操作
</li>
</ul>
<hr class="line-style-solid" />
</li>
</ul>
</div>
<div v-show="downloadConfigList != null && downloadConfigList.length > 0" class="body-float-fixed">
<ul>
<li class="ptb5 tableulli fsize14" v-for="(item,index) in downloadConfigList">
<ul class="">
<li class="pct5">
<p>item.id</p>
</li>
<!--<li class="pct20">
<span v-if="item.isSchool==1" style="color:red;">item.name<p class="el-icon-school"></p></span>
<span v-else >item.name</span>
</li>-->
<li class="pct15" style="text-align: center;">
<p>item.starttime1</p>
</li>
<li class="pct15" style="text-align: center;">
<p>item.endtime1</p>
</li>
<li class="pct15" style="text-align: center;">
<p>item.starttime2</p>
</li>
<li class="pct15" style="text-align: center;">
<p>item.endtime2</p>
</li>
<li class="pct15" style="text-align: center;">
<p>item.maxcount</p>
</li>
<li class="pct15" style="text-align: center;">
<el-button type="success" size="mini" class="ml15" @click="showDownloadConfigInfo(item)">修改</el-button>
</li>
</ul>
<hr class="line-style-solid" />
</li>
</ul>
</div>
<div v-show="downloadConfigList == null || downloadConfigList.length <= 0" class="fsize28 bold text-danger text-center">
errormsg
</div>
<div class="footer-float-fixed common-box-shadow ptb5">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10,50, 100, 200, 500]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalNum">
</el-pagination>
</div>
<el-drawer title="" :visible.sync="updateDownloadConfigInfo" :with-header="false" size="40%">
<div class="pa15 ">
<div style="height: calc(100vh - 90px); overflow-y: auto;" class="pa10">
<el-card class="mb15 pb10">
<div slot="header" class="clearfix">
<!--$t('Extend3.修改下载配置')-->
<span>$t('Extend3.修改下载配置')</span>
</div>
<!--id-->
<el-row>
<el-col :span="6" class="pl15 pr15 pt5 pb5 text-right">
<label class="pr15"><span style="color: #FF0000;">*</span>$t('ID'):</label>
</el-col>
<el-col :span="18" class="pl15 pr15 pt5 pb5">
<el-input :placeholder="$t('Extend3.请输入id')" :disabled="true" v-model="EditDownloadConfig.id" style="width: 250px;" maxlength=20 show-word-limit size="mini" clearable></el-input>
</el-col>
</el-row>
<!--2.上午禁止下载时间开始-->
<el-row>
<el-col :span="6" class="pl15 pr15 pt5 pb5 text-right">
<label class="pr15"><span style="color: #FF0000;">*</span>$t('Extend3.上午禁止下载时间开始'):</label>
</el-col>
<el-col :span="18" class="pl15 pr15 pt5 pb5">
<el-input :placeholder="$t('Extend3.请输入上午禁止下载时间开始')" v-model="EditDownloadConfig.starttime1" maxlength=20 style="width: 250px;" show-word-limit size="mini" clearable></el-input>
</el-col>
</el-row>
<el-row>
<el-col :span="6" class="pl15 pr15 pt5 pb5 text-right">
<label class="pr15"><span style="color: #FF0000;">*</span>$t('Extend3.上午禁止下载时间截止'):</label>
</el-col>
<el-col :span="18" class="pl15 pr15 pt5 pb5">
<el-input :placeholder="$t('Extend3.请输入上午禁止下载时间截止')" v-model="EditDownloadConfig.endtime1" maxlength=20 style="width: 250px;" show-word-limit size="mini" clearable></el-input>
</el-col>
</el-row>
<!--4.下午禁止下载时间开始-->
<el-row>
<el-col :span="6" class="pl15 pr15 pt5 pb5 text-right">
<label class="pr15"><span style="color: #FF0000;">*</span>$t('Extend3.下午禁止下载时间开始'):</label>
</el-col>
<el-col :span="18" class="pl15 pr15 pt5 pb5">
<el-input :placeholder="$t('Extend3.请输入下午禁止下载时间开始')" v-model="EditDownloadConfig.starttime2" maxlength=20 style="width: 250px;" show-word-limit size="mini" clearable></el-input>
</el-col>
</el-row>
<!--5.下午禁止下载时间截止-->
<el-row>
<el-col :span="6" class="pl15 pr15 pt5 pb5 text-right">
<label class="pr15"><span style="color: #FF0000;">*</span>$t('Extend3.下午禁止下载时间截止'):</label>
</el-col>
<el-col :span="18" class="pl15 pr15 pt5 pb5">
<el-input :placeholder="$t('Extend3.请输入下午禁止下载时间截止')" v-model="EditDownloadConfig.endtime2" maxlength=20 style="width: 250px;" show-word-limit size="mini" clearable></el-input>
</el-col>
</el-row>
<!--6.最大下载量-->
<el-row>
<el-col :span="6" class="pl15 pr15 pt5 pb5 text-right">
<label class="pr15"><span style="color: #FF0000;">*</span>$t('Extend3.最大下载量'):</label>
</el-col>
<el-col :span="18" class="pl15 pr15 pt5 pb5">
<el-input :placeholder="$t('Extend3.请输入最大下载量')" v-model="EditDownloadConfig.maxcount" maxlength=20 style="width: 250px;" show-word-limit size="mini" clearable></el-input>
</el-col>
</el-row>
</el-row>
</el-card>
</div>
<div class="drawer-float-fixed pa15" style="text-align: center;">
<el-button type="success" @click.native="saveOrEdit()" size="mini">$t('Extend3.确定')</el-button>
</div>
</div>
</el-drawer>
</div>
</template>
<script>
import API_COMPANY from '../../api/api_company'
export default
data()
return
employee: this.$store.state.employee,
search:
id: "",
name: "",
status: "",
,
page: 1,
pageSize: 50,
totalNum: 0,
downloadConfigList: [],
DownloadConfigInfo: false,
updateDownloadConfigInfo: false,
EditDownloadConfig:
id: '',
starttime1: '',
endtime1: '',
starttime2: '',
endtime2: '',
maxcount: '',
,
errormsg: '数据初始化...',
drawer: false,
drawerwidth: '50%',
orderObj: [],
typeItems:
name: "status",
el_link_class_all: "el-link-active",
type: "",
items: [
value: 1,
label: "正常",
el_link_class: "",
type: "",
,
value: 2,
label: "停用",
el_link_class: "",
type: "",
,
],
,
,
methods:
handleSizeChange(val)
this.pageSize = val;
//this.findAllCompany();
this.findAllDownloadConfig();
,
handleCurrentChange(val)
this.page = val;
this.findAllDownloadConfig();
,
// showCompanyInfo(obj)
// this.comPanyInfo = true;
// this.orderObj=obj;
// ,
showDownloadConfigInfo(obj)
this.updateDownloadConfigInfo = true;
this.EditDownloadConfig = obj;
,
getNewTime(time)
let timestamp = new Date().getTime();
if(time - timestamp > 518400000)
return 1;
if(time - timestamp < 518400000 && time - timestamp > 0)
return 2;
return 0;
,
tagChange(obj, tag)
if(tag == -1 || tag == "-1")
obj.el_link_class_all = "el-link-active";
obj.type = "primary";
//去除其他项
obj.items.forEach(function(item, index)
item.el_link_class = "";
item.type = "";
);
else
obj.el_link_class_all = ""; //去掉全部项的样式
obj.type = "";
//绑定当前点击项的样式
let tagNow = obj.items.filter(function(item, index, arr)
return item.value == tag;
)[0];
tagNow.el_link_class = "el-link-active";
tagNow.type = "primary";
//去除其他项的样式
obj.items
.filter(function(item, index, arr)
return item.value != tag;
)
.forEach(function(item, index)
item.el_link_class = "";
item.type = "";
);
//组装查询条件
switch(obj.name)
case "status":
if(tag != -1 && tag != "-1")
this.search.status = tag;
else
this.search.status = 0;
break;
default:
break;
this.findAllCompany();
,
saveOrEdit()
let param = ;
//塞入1. ID
if(this.EditDownloadConfig.id != '')
param.id = this.EditDownloadConfig.id;
else
alert(this.$t('必须输入ID'));
return false;
//2.开始时间
if(this.EditDownloadConfig.starttime1 != '')
param.starttime1 = this.EditDownloadConfig.starttime1;
else
alert(this.$t('必须上午输入开始时间'));
return false;
//3.
if(this.EditDownloadConfig.endtime1 != '')
param.endtime1 = this.EditDownloadConfig.endtime1;
else
alert(this.$t('必须输入上午截止时间'));
return false;
//4.
if(this.EditDownloadConfig.starttime2 != '')
param.starttime2 = this.EditDownloadConfig.starttime2;
else
alert(this.$t('必须输入下午开始时间'));
return false;
//5.
if(this.EditDownloadConfig.endtime2 != '')
param.endtime2 = this.EditDownloadConfig.endtime2;
else
alert(this.$t('必须输入下午截止时间'));
return false;
//6.
if(this.EditDownloadConfig.maxcount != '')
param.maxcount = this.EditDownloadConfig.maxcount;
else
alert(this.$t('必须输入最大下载量'));
return false;
API_COMPANY.saveAndUpdateDownloadConfig(param).then(data =>
if(data.code == 200)
this.cleandata();
this.updateDownloadConfigInfo = false;
this.findAllDownloadConfig();
this.$message(
showClose: true,
message: data.msg,
type: 'success'
);
else
this.$message(
showClose: true,
message: data.msg,
type: 'error'
);
).catch(error =>
this.$message(
showClose: true,
message: this.$t('修改成功'),
type: 'success'
);
);
,
findAllDownloadConfig(parm)
let param =
page: this.page,
pageSize: this.pageSize
;
this.downloadConfigList = []; //清空
this.errormsg = this.$t('EmployeeManagement.数据查询中');
API_COMPANY.findAllDownloadConfig(param).then(data =>
if(data.code == 200)
this.downloadConfigList = data.datas;
this.totalNum = data.totalNum;
/*this.$message(
* showClose: true,
message:data.msg,
type:'success'
);*/
else
this.errormsg = data.msg;
).catch(error =>
this.errormsg = this.$t('EmployeeManagement.查询下载配置列表异常');
);
,
initPage()
this.logistics = [];
let param =
page: 1,
pageSize: 50,
this.findAllDownloadConfig();
,
,
mounted()
//document.getElementsByClassName('el-main')[0].addEventListener('scroll', this.handleScroll,true);
this.$globals.addScrollBarEvent();
this.$globals.calculateScrollFloat();
window.onresize = () => this.$globals.calculateScrollFloat();
,
created()
this.initPage();
,
destroyed()
//document.getElementsByClassName('el-main')[0].removeEventListener('scroll', this.handleScroll,true);
this.$globals.cancelScrollBarEvent();
this.$globals.initializationCss();
,
</script>
<style>
.shippingordertaskhistory .el-card__body
padding: 10px 20px;
/* .inputselect .el-select .el-input
width: 110px;
*/
.ul-border-bottom-solid
border-bottom: 1px solid #cfd9db;
.ul-border-bottom-dashed
border-bottom: 1px dashed #cfd9db;
.ul-th
font-weight: bold;
/* .selectedlogistics .el-select .el-input
min-width: 200px;
*/
.el-drawer__body
overflow: auto;
</style>以上是关于前端vue代码如何调试？的主要内容，如果未能解决你的问题，请参考以下文章
webstorm中使用debugger模式调试 react vue 前端代码，可以在webstorm源码处打断点