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项目，并且在页面...