Web开发最常用的高度就是 console.log ,虽然 console.log 占有一席之地,但很多人并没有意识到 console 本身除了基本 log 方法之外还有很多其他方法。 适当使用这些方法可以使调试更容易,更快速,更直观。 console.log() 在console.log 中有很多人们意想不到的功能。虽然大多数人使用 console.log(object) 来查看对象,但是你也可以使用 console.log(object, otherObject, string),它会把它们都整齐地记录下来,偶尔也会很方便。...
一、创建小程序项目mock.js 从 https://github.com/nuysoft/Mock/blob/refactoring/dist/mock.js 下载 api.js:配置模拟数据和后台接口数据,通过DEBUG = true;//切换数据入口 let API_HOST = "http://xxx.com/xxx"; let DEBUG = true;//切换数据入口 var Mock = require(mock.js) function ajax(data = , fn, method = "get", header = {}) {if (!DEBUG) {wx.request({url: config.API_HOST + data,method: method ? method : get...
移动端调试困难 很多时候,我们在进行移动端开发时,都是先在PC端使用手机模拟器进行调试,没有问题后,我们才会在手机端的浏览器进行测试,这个时候,如果没有出现问题,皆大欢喜。但是一旦出现问题,我们就很难解决,因为缺乏可视化的界面。不似在PC端,我们能直观的去改变样式,或者是进行断点调试。有时,在移动端我们不得不借助于alert来调试,但是这样的调试方法效率极其低下,很多时候,都是靠经验,或者是靠排除法。甚至,...
如果你有 PHP 开发经验,会习惯在修改 PHP 脚本直接刷新浏览器以查看结果,而你 在开发 Node.js 实现的 HTTP 应用时会发现,无论你修改了代码的哪一个部分,都必须终止Node.js然后重新运行。 这是因为 Node.js 只有在第一次引用到某一部分时才会去解析 本文件,以后都会直接访问内存,避免重复载入,而 PHP 则是重新读取并解析脚本(如果没有专门的优化配置)。 在开发Node.js实现HTTP应用时会发现,无论你修改了代码的哪一部分,都必须终止...
在开发中,有时候我们需要在手机上进行测试,可是如果遇到bug,我们怎么进行抓包调试呢?这里介绍两种方式: VconsoleFillder利用Vconsole进行调试 一个轻量、可拓展、针对手机网页的前端开发者调试面板 Vconsole特性: 查看 console 日志查看网络请求手动执行 JS 命令行自定义插件入门 ①首先需要下载Vconsole,地址https://www.npmjs.com/package/vconsole ②npm install vconsole③ Import dist/vconsole.min.js to your project...
前言 因为最近一直在弄移动端项目,由于在移动端无法打开控制台,所以想办法打印调试console的数据一直苦恼。之前用的是chrome的inspect调试,但是只能使用移动版的chrome查看数据,兼容不好,所以最近使用了vConsole 进行调试 使用 废话不多说,说说怎么使用的吧。 首先去下载相关的代码,由于只需要在页面引入一个js文件,直接去下载就可以,地址: 请戳我 或者使用 npm 安装: npm install vconsole使用webpack,然后js代码中 i...
使用vue的同学们大都是基于vue-cli来搭建项目的,vue-cli中的配置全面强大。 // 常用的命令 npm run dev // 本地热更新模式 npm run build //生产模式 会在根目录下打包出一个dist文件夹,直接放在服务器上就可以使用了开发阶段与后台同学进行数据交互(调试接口) 本机与服务器之间会出现跨域问题跨域报错 解决办法 在npm run dev执行后,项目会在本地node中执行。vue-cli中提供了非常方便的代理方式。 直接上代码 根目录/config/...
webpack.config.js在配置devtool时,webpack给我们提供了四种选项 source-map:在一个单独文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度;cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map,不带列映射提高了打包速度,但是也使得浏览器开发者工具只能对应到具体的行,不能对应到具体的列(符号),会对调试造成不便。eval-source-map:使用eval打包源文件模块,在同一...
本文主要介绍 vue的调试工具 vue-devtools 的安装和使用 工欲善其事, 必先利其器, 快快一起来用vue-devtools来调试开发你的vue项目吧 安装: 1.到github下载: git clone https://github.com/vuejs/vue-devtools2.在vue-devtools目录下安装依赖包 cd vue-devtools cnpm install3.修改manifest.json文件把"persistent":false改成true 4.编译代码 npm run build 5.扩展Chrome插件 Chrome浏览器 > 更多程序 > 拓展程序 点击加载已解压...
如下所示: body="Darry 官网(戴珠宝官网)是戴珠宝指定官方网站,darry戴珠宝官网提供;戴珠宝产品包括:结婚戒指、求婚戒指等钻戒|对戒系列,欢迎进入戴珠宝唯一官网详细了解;";var reg = /[a-z]+/i;res = body.match(reg);if(res.length>0){console.log(res,res);} 原来设想res是个数组,值就应该与res.join()一样,结果测试不同。 如果让js代码按照预定思路走,调试过改成以下样子 : body="Darry 官网(戴珠宝官网)是戴珠宝...
1. 通过 Git 克隆项目到本地 git clone https://github.com/vuejs/vue-devtools.git2. Git 进入到 vue-devtools 所在目录,然后运行以下两个指令。 先运行 npm install 安装项目依赖 再运行 npm run build 进行编译生成 这两条指令的运行都需要一定的时间,请耐心等待,build 成功后如下图:3.修改安装目录vue-devtools\shells\chrome 中 的manifest.json文件。 将persistent 参数改为 true,如下图:4. 将扩展程序添加到chrome浏览...
Vue项目一般使用自带的脚手架工具vue-cli和webpack打包方式进行项目构建运行。开发中,我们在控制台输入命令行npm run dev部署项目后,默认开启的页面调试地址是8080端口。但是有时候我们在进行多个项目开发需要同时部署多个vue项目,甚至有的还需要启动后台项目,这时就需要修改Vue项目的启动端口(不然会报端口被占用的错误,一个端口号只能一个进程占用)。 本文像大家讲解如何找到Vue项目中端口的配置文件,并修改。 首先,我们...
前言 最近搞vue+webpack,vue的api还是比较容易懂的,每次build很复杂,这里就介绍下热启动调试吧,心累~~~ ITDogFire –sky 工具及目录 所用的到的简单工具 webstorm +vue +webpack +express,小项目都是官方down下来的。 目录介绍如下package {"name": "yx","version": "1.0.0","description": "A sample Node.js app using Express 4","main": "server.js","scripts": {"build": "webpack --config ./build/webpack.dev.conf.js...
前言 大家有没有遇到这样的一个问题,我们在分析一些大型电子商务平台的Web前端脚本时,想找到一个元素绑定的点击事件,并不是那么容易,因为有些前端脚本封装的比较隐蔽,甚至有些加密脚本,用传统的查找元素ID、或者页面源码方法去找,可能最后徒劳无功。下面我来介绍利用chrome浏览器来查找元素绑定的事件。 Chrome开发工具中最有用的面板Sources。Sources面板几乎是最常用到的Chrome功能面板,也是解决一般问题的主要功能面板。...
第一种,使用vue插件 1、下载插件:https://www.gxlcms.com/softs/588080.html这样直接run一个vue项目,你就会看见插件标亮了打开调试模式,你就会看见最后有个vue标记,打开能看见当前vue页面渲染相关数据第二种,使用webstrom调试下载插件 下载地址:https://www.gxlcms.com/softs/171905.html打开webstrom Debugger, 记住端口号打开刚才安装的插件,选项,填入刚才看见的端口号添加一个debug配置这样运行一个vue项目,并且在页面...