在线调试方案的思考与实践

永利402com官方网站 4
永利402com官方网站

☞ 小结

优化流程、优化架构是我们拼命坚定不移的动向,本文重要解说,编辑代码到调节和测量试验线上效果的长河,提议了消除combo
和代码压缩等难题的方案和建议。希望能够给不善于代理调节和测验的同窗一点启发。

1 赞 收藏
评论

永利402com官方网站 1

webpack

大局安装webpack npm install webpack –save-dev

新建文件夹webpack

1.开头化二个连串 npm init

name:不能为webpack

2.在该公文夹上边设置npm install webpack –save-dev

  1. webpack 财富模块化

webpack ./app/main.js ./app/bundle.js

  1. mongodb 非关系型数据库

mongoose Nodejs操作mongodb数据库的模块

☞ 代理调节和测验的郁闷

而对此相比复杂的线上蒙受,代理也会遇到不菲绊脚石,比如:

线上财富 combo

并发谬误的本子地址为  ,它对应着
a.js,b.js,c.js 多少个本子文件,即便大家使用 Fiddler/Charles那样的经文代理工科具调节和测量检验代码,就一定要给那么些工具编写插件,只怕在轮换配置内部加一群推断也许正则,开支高,门槛高。

线上代码压缩

包装压缩,那是上线从前的必经流程。由于大家在包装的环节中并从未思索为代码加多sourceMap,而线上事先对应 index-min.jsindex.js
也因为安全地点的缘由给干掉了,那给大家调节和测量试验代码产生了偌大的不便于。

代码注重非常多,拉替代码难点

广大时候,大家的页面信赖了多个 asserts
财富,而这几个能源各自布满在两个仓库里面,以致散播在分化的颁发平台上,为了能够在源码上清晰的调整代码,大家只可以将装有的财富下载到本地,时期只要存在下载代码的权能难点,整个调节和测量检验进程就慢下来,那是丰盛不可能经受的作业。比方某系统塑造的页面,页面上的模块都是以货仓为维度区分的,一个页面恐怕对应了5-52个商旅,下载代码实为劳动。

最骇人据书上说的调节和测量试验是,本地未有相应的测验情况、代理工科具又不满意我们的须求,然后就只可以,
编辑代码->打包压缩->提交代码->查看效果->编辑代码->… ,要是您的花色开销是这种方式,请停下来,思索调节和测量试验优化方案,正所谓必先利其器。

cmd命令:

   ./  当前目录

   ../ 上一级

   dir  查看当前目录

   ls  查看当前目录下文件

   windows 切换盘符 d:

   cls清屏

   cd +文件加名

☞ 消除代理境遇的主题材料

上边我们关系了八个难点,平日费用境遇最发烧的二个是 combo ,曾经我们页面上的代码加一个?_xxx  参数就可见平昔开端调试方式,那是因为程序的入口只有一个,并且具备脚本的依赖也卷入到叁个誉为
deps.js  文件中,加上调节和测验参数之后,可以将原来combo 加载的文本:  ,根据非
combo 的点子加载:

1
2
3
http://example.com/path/a.js
http://example.com/path/b.js
http://example.com/path/c.js

地点的代码能够轻便地代理到本地,不过有的系统生成的代码并不曾 deps.js  文件,它是将脚本直接出口到页面上:

<script
src=”;

1
<script src="http://example.com/path/??a-min.js,b-min.js,c-min.js"></script>

☞ 解决 combo 问题

那会儿因而 Fiddler/查理工科具相比较难满意急需,对于这一个主题素材有三个管理方案:

1). 浏览器须求全体代理到本地的三个服务

第生机勃勃写五个地点服务:

JavaScript

var http = require(‘http’); // npm i http-proxy –save var httpProxy =
require(‘http-proxy’); var proxy = httpProxy.createProxyServer({}); var
server = http.createServer(function(req, res) { console.log(req.url);
if(req.url.indexOf(“??”) > -1){ // combo能源让 3400 端口的劳动处理proxy.web(req, res, { target: ” }); } else { //
直接重返 proxy.web(req, res, { target: req.url }); } }).listen(3399,
function(){ console.log(“在端口 3399 监听浏览器诉求”); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var http = require(‘http’);
// npm i http-proxy –save
var httpProxy = require(‘http-proxy’);
var proxy = httpProxy.createProxyServer({});
 
var server = http.createServer(function(req, res) {
  console.log(req.url);
  if(req.url.indexOf("??") > -1){
    // combo资源让 3400 端口的服务处理
    proxy.web(req, res, { target: ‘http://127.0.0.1:3400’ });
  } else {
    // 直接返回
    proxy.web(req, res, { target: req.url });
  }
}).listen(3399, function(){
    console.log("在端口 3399 监听浏览器请求");
});

代码的野趣是,利用 http-proxy 这几个 npm
包,代理浏览器的伸手,浏览器上应用 switchSharp 设置本地代理为  ,当号召过来,先决断url,如若 url 中富含了 ?? 则将其视作 combo
财富管理,代理给地方的另贰个服务  ,那一个服务收取央浼后会将
combo 内容分解成四个,全体央浼完之后再吐出来。

2). 使用本地服务央求 html 代码,替换 html 代码内容

利用强制手腕(源码替换)将代码解 combo,比方源码页面为:

<!– html code –> <script
src=”;
<!– html code –>

1
2
3
<!– html code –>
<script src="http://example.com/path/??a-min.js,b-min.js,c-min.js"></script>
<!– html code –>

行使本地服务须求那几个url,然后调换来:

<!– html code –> <script
src=”; <script
src=”; <script
src=”; <!– html code
–>

1
2
3
4
5
<!– html code –>
<script src="http://example.com/path/a.js"></script>
<script src="http://example.com/path/b.js"></script>
<script src="http://example.com/path/c.js"></script>
<!– html code –>

金玉满堂那一个操作的代码:

JavaScript

var http = require(‘http’); // npm i request –save; var request =
require(‘request’); http.createServer(function(req, res){ var path =
req.url.slice(req.url.indexOf(“path=”) + 5); console.log(path);
if(!path) { res.write(“path is empty”); res.end(); return; }
request(path, function (error, response, body) { if (!error &&
response.statusCode == 200) { console.log(body); // 代码替换 body =
body.replace(‘<script
src=”;’,
‘<script src=”
<script src=”
<script src=”;’ );
res.write(body); res.end(); } }); }).listen(3399, function(){
console.log(“listening on port 3399”); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var http = require(‘http’);
// npm i request –save;
var request = require(‘request’);
http.createServer(function(req, res){
    var path = req.url.slice(req.url.indexOf("path=") + 5);
    console.log(path);
    if(!path) {
        res.write("path is empty");
        res.end();
        return;
    }
    request(path, function (error, response, body) {
        if (!error && response.statusCode == 200) {
            console.log(body);
            // 代码替换
            body = body.replace(‘<script src="http://example.com/path/??a-min.js,b-min.js,c-min.js"></script>’,
                ‘<script src="http://example.com/path/a.js"></script>\
                <script src="http://example.com/path/b.js"></script>\
                <script src="http://example.com/path/c.js"></script>’
            );
            res.write(body);
            res.end();
        }
    });
}).listen(3399, function(){
    console.log("listening on port 3399");
});

比如说央求  ,就可以获得Taobao首页的源码,然后对得到的代码做替换。

☞ 化解代码压缩难点

对于那几个主题材料,提出在线上放两份源码,风姿罗曼蒂克份是减掉源码,黄金时代份是未压缩源码,当页面
url 存在 debug永利402com官方网站,
参数的时候,再次回到未压缩版本,平常重回压缩版本。当然,也得以使用上述办法管理难题。

唯独,更客观的措施应该是 sourceMap,前端未有地下,压缩代码只是扩大了
骇客 的笔诛墨伐成本,并不要紧碍有本事的 黑客借系统漏洞入侵。所以可感觉源码提供黄金年代份 sourceMap
文件。

JavaScript

var gulp = require(‘gulp’); var sourcemaps = require(‘gulp-sourcemaps’);
gulp.task(‘javascript’, function() { gulp.src(‘src/**/*.js’)
.pipe(sourcemaps.init()) //.pipe(xx()) .pipe(sourcemaps.write())
.pipe(gulp.dest(‘dist’)); });

1
2
3
4
5
6
7
8
9
10
var gulp = require(‘gulp’);
var sourcemaps = require(‘gulp-sourcemaps’);
 
gulp.task(‘javascript’, function() {
  gulp.src(‘src/**/*.js’)
    .pipe(sourcemaps.init())
      //.pipe(xx())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(‘dist’));
});

关于 sourceMap 的 gulp
插件配置,详细情况能够戳这里。不独有是
JavaScript,CSS 也许有 source maps,那些音讯能够在 Chrome
调控台的设置选项中看出:

永利402com官方网站 2

☞ 代码的拉取

若果叁个体系唯有你了解什么样校订,那这么些类型的手艺安顿就有一些不好了,为了让大家都能管理你项目中的难题,必须求索要二个简洁明了的情势为开辟者快捷搭建测量检验遭逢,文书档案是生机勃勃派,借使有个风流倜傥键操作的一声令下,那就更棒了!

# 运行脚本 start: createFile getMod getPage # 创造目录 createFile: @[
-d module ] || mkdir module @[ -d page ] || mkdir page #
拉取模块旅舍,这里有几12个,相比较费时,请耐烦等待… getMod: cd module;
\ for i in $(MODS); do \ [ -d $(MODPATH)$$i ] || git clone
$(MODPATH)$$i; \ git co -b master;\ git co -b $(MODSV); done #
拉取页面旅社,tbindex getPage: cd page; \ @[ -d tbindex ] || git
clone $(PAGEPATH)$PAGE;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 启动脚本
start: createFile getMod getPage
 
# 创建目录
createFile:
  @[ -d module ] || mkdir module
  @[ -d page ] || mkdir page
 
# 拉取模块仓库,这里有几十个,比较费时,请耐心等待…
getMod:
  cd module; \
  for i in $(MODS); do \
    [ -d $(MODPATH)$$i ] || git clone $(MODPATH)$$i; \
    git co -b master;\
    git co -b $(MODSV);
  done
 
# 拉取页面仓库,tbindex
getPage:
  cd page; \
  @[ -d tbindex ] || git clone $(PAGEPATH)$PAGE;

 

下边是一个 MakeFile
的后生可畏对代码,功效是创立开拓目录,拉取分支音讯,然后初始服务器,张开浏览器,使用
IDE 展开目录,万事就绪,只等主人敲代码。

整套流程就意气风发三分钟,实现开拓早先全部的准备职业。那个本子不仅是给自个儿使用,如果其余人也急需加入开采,二个发令就能够让参加者步入支付格局,加上文书档案表明,省却了过多联系开支。

querystring模块 查询字符串

var qs = require(“querystring”);

var o = {

color: “red”,

border: “1px solid red”,

“font-size”: “16px”

}

var ret = qs.stringify(o, “;”, “:”);

console.log(ret);

// “color:red;border: 1px solid red;font-size: 16px”

在线调节和测验方案的企图与奉行

2015/08/28 · HTML5 ·
调试

原稿出处:
李靖(@Barret李靖)   

正文的要点不在移动端调试上,移动端调试无非就是调度页面和调治将养工具之间存在分离,清除这种抽离并创造连结就能够一举成功移动端的调节和测验难点。珍视阐释的是所见即所得的调节和测量试验情势下会碰着的阻碍。

当咱们开垦网页,发掘多个模块未有科学地渲染只怕空白时,若是调整台有报错,会平素依照报错定位到源码地点上马
debug;要是调节台未有报错,则会基于模块名或然模块特征的四个值,通过全局搜索找到那一个模块的岗位,然后在调解工具中断点,单步调节和测验,找到难题所在,那时候大家恐怕会这么做:

情形一:

小A同学展开调节台,开采断点调节和测量检验不佳写代码,于是将精减的源码复制生龙活虎份保存到地面,格式化,然后将线上能源通过代办工具代理到地头文件。

情形二:

小B同学早早的为友好配了风流洒脱份本地开采情况,于是他遇见难点之后,直接去源码中牢固错误地方,由于应用的是预管理语言,所以供给先打包编写翻译之后再在地面预览效果。

情形三:

小C同学的调治方式是小A和小B的汇总版本,将线上的能源代理到本地 build
目录文件,在 src 目录下修正之后编写翻译打包到 build,然后预览。

gulp

npm init

npm install gulp –save-dev

新建 gulpfile.js(暗许实行的文书)

//gulpfile.js

//1.配置任务, 2.活动推行

var gulp = require(“gulp”);

var uglify = require(“gulp-uglify”);

//task1 定义二个职分ufligy 压缩js

gulp.task(“uglify” ,function() {

gulp.src(“./src/js/*.js”)

.pipe(uglify())

.pipe(gulp.dest(“./dist/js”))

})

安装gulp-uglify插件 npm install gulp-uglify –save-dev

新建src文件夹 > js文件夹 >demo.js

新建dist文件夹> js文件夹 >

运行 gulp uglify

下一场在dist文件夹就能够找到已经减弱的demo.js

插件:gulp-less

插件:gulp-minify-css

//文件看守, 监听./src/less/*.less 文件的变型,变化运维该less职务

gulp.task(“default”, [“uglify”, “less”], function() {

gulp.watch(“./src/less/*.less”, [“less”]);

})

//运转 gulp就能够纵然更换代码

☞ 开启懒人调节和测验格局

当见到线上冒出难题(或许是别的同学担任页面的难点),脑中浮出这样的景色:

复制代码 作者:”嘿,线上反常呀!小编要调度代码!”
计算机:”好的,主人。请问是哪个页面?”(弹出浮层) 作者:浮层中输入U景逸SUVL。
Computer:”请问是哪位地点出难点了?” 笔者:(指着Computer)”模块A和模块B。”
Computer:正在下载A、B能源…正在将上线A、B映射到本地…自动打开A、B对应文件夹
小编:编辑代码,然后实时预览效果。

1
2
3
4
5
6
7
8
复制代码
  我:"嘿,线上有问题啦!我要调试代码!"
电脑:"好的,主人。请问是哪个页面?"(弹出浮层)
  我:浮层中输入URL。
电脑:"请问是哪个地方出问题了?"
  我:(指着电脑)"模块A和模块B。"
电脑:正在下载A、B资源…正在将上线A、B映射到本地…自动打开A、B对应文件夹
  我:编辑代码,然后实时预览效果。

在这边大家要求缓慢解决那样多少个难点

  • 将页面前遭遇应的有着旅馆/财富罗列在客商眼前
  • 下载财富的权柄提醒和权限管理
  • 线上能源解 combo,然后映射到本地

本来调节和测验之后,能够还应该有三个操作:

本身:”哈,已经修复了,帮自身付诸代码~”
Computer:正在diff代码…收到确认提交连续信号,提交到预发碰着…收到已经预览时域信号…正在宣布代码…收到线上回归非非确定性信号…流程甘休

1
2
我:"哈,已经修复了,帮我提交代码~"
电脑:正在diff代码…收到确认提交信号,提交到预发环境…收到已经预览信号…正在发布代码…收到线上回归信号…流程结束

除了这些之外 debug 代码,我们需求做的就只是用肉眼看成效是还是不是ok,整个流程优化下来,体验是超赞的!

http模块

var http = require(“http”); //加载模块

var server = http.createServer((request, response) => {

//创立三个web服务器

//request

//response

//设置响应头

console.log(request.url);

switch(request.url) {

             case “/”:

                    response.write(“首页”);

                     break;

case “/list”:

response.write(“列表页”);

break;

case “/detail”:

response.write(“详情页”);

break;

}

response.writeHead(200, {

“Content-Type”:”text/html; charset=utf8″

})

response.end();

//if(request.url)

})

//http80端口号 ftp23端口号

server.listen(3000, function() {

console.log(“server has started at port 3000”);

})

☞ 在线调节和测验实行(一个系统的调治将养工具)

输入须要调弄整理的页面UENVISIONL(如
http://www.taobao.com):

永利402com官方网站 3

插件会深入分析 DOM,遍历获得页面全数被引用到的仓库:

永利402com官方网站 4

慎选需求调和的模块(颗粒度细分到了html/js/css),点击调节和测验按键,能够见见调节和测验页面包车型大巴财富都会援引本地下载的文本。

NodeJS:

1.node.js开采条件搭建

2.npm nodejs包管理器

3.CommonJS模块化标准化,英特尔(require)

4.导出模块/加载模块

2.爬虫 cheerio

原理: 1.拉取页面(字符串)http.get/request(node),file_get_content(php)

2.用到模块,方便神速筛选.cheerio(node), simple.html.dom.php(php)

3.访谈音信

npm install cheerio //安装cheerio模块

npm init

// spider.js

var http    = require(“http”);

var cheerio = require(“cheerio”);

var fs      = require(“fs”);

3.express 基于 Node.js 平台,火速、开放、极简的 web 开荒框架。

nmp install express -g

npm install express-generator -g(火速创制express的完好目录)

express -h

express myapp

cd myapp

npm start

express

1.新建文件夹

cd到该文件目录下

npm init (enter name:myapp enter….)

npm install express

在myapp里面新建app.js

在app.js里面写代码

var express  = require(“express”),//加载express模块

http = require(“http”), //加载http模块

app  = express(), //创制叁个express实例

server  = http.createServer(app); //app能够视作http创造服务器的回调函数

//静态财富挂载,设置静态能源目录

//中间件 express.static

//挂载中间件 使用use

app.use(express.static(“public”));

//定义一个到手访问客户IP的中间件

//哪个先挂载,先利用哪个的代码

var ips = [];

function getIp(req, res, next) {

console.log(req.ip);

ips.push(req.ip);

next();

}

function responseIP (req, res, next) {

res.send(req.ip);

}

app.use((req, res, next) => {

console.log(“hello”);

next();

})

app.use(getIp);

app.use(responseIP);

app.get(“/”, (req, res) => {

res.send(“首页”);

})

app.get(“/list”, (req, res) => {

// console.log(req.ip);获取ip

res.send(“列表页”);

})

app.get(“/details”, (req, res) => {

res.send(“详情页”);

})

server.listen(3000, function() {

//监听端口号3000,并提示服务成功开启

console.log(“Server has started”);

})

总括express:中间件和路由.

socketio 是对websocket协调封装的一个模块,让顾客端和劳务器端的写法都是一样的

socket.emit()发数据

socket.on()收数据

监听顾客端连接,回调函数会传递本次连接的socket

io.on(‘connection’,function(socket));

给持有客商端广播音信

io.sockets.emit(‘String’,data);

给钦定的顾客端发送新闻

io.sockets.socket(socketid).emit(‘String’, data);

监听客商端发送的消息

socket.on(‘String’,function(data));

给该socket的客商端发送信息

socket.emit(‘String’, data);

3.WebSocket

new Websocket(“ws:localhost/chat”)

http协议:

HyperText Transport Protocol)是超文本传输合同的缩写.

http央求:get/post/put/delete(get在地址栏,传输速度快,大小有限定.在头,只好传输一些文本;post加密传输,在正文)

能够倡导http要求的措施:浏览器/postman/curl/Fiddle/php/node.js

http1.0和http1.1的分别:1.0是每便伏乞都创立一个接连,而1.1是两个央浼一个连接.

报文:请求头(post有content-type:”application-x-www-form-urlencoded”,
cookie)+正文

xhr.readystate

XMLHttpRequest.UNSENT  0        最早化连接

XMLHttpRequest.OPENED  1        连接创设

XMLHttpRequest.HEADER_RECEIVED 2  接纳到央浼头

XMLHttpRequest.LOADING  3        管理数据

XMLHttpRequest.DONE    4        管理完结

xhr.status HTTP响应状态码

1初步  101 切换左券

2开头  成功  200

3开头  重定向  304 301/302

4从头  客商端错误  404 403

5最初  服务器端错误

1.http央浼页面,不是该文件目录下的页面重定向,别的的依赖目录查找

var http = require(“http”); //CommonJS规范 加载模块

var fs = require(“fs”);

var path = require(“path”);

var server = http.Server(); //创设服务器

server.on(“request”, function(req, res) {

var filepath = path.join(__dirname, “./www”, req.url);

if(req.url === “/”) {

filepath = path.join(filepath, “index/html”);

}

try{

var stat = fs.statSync(filepath);

if(stat.isFile()) {

var content = fs.readFileSync(filepath);

res.setHeader(“Content0length”, Buffer.bytelength(content))

res.write(content);

}else if(stat.isDirectory() {

//当要求的不二诀要是目录的时候

})

}catch(e) {

//重定向301(永久) 302(暂时)

res.writeHead(302, {

“Location” : “/”

})

}

res.end();

})

server.listen(3000, function() {

console.log(“server has started”);

})

es6:

1.let/const

2.目标里的方法function能够大致

3.函数中的默许参数

4.template

5.箭头函数

6.扩充操作符

7.解构赋值

8.Symbol

9.class 模拟类,但本质是遵照原型的

10.for …of

11.promise 清除回调金字塔.回调鬼世界

12.生成器函数,能够退出函数

13.JS模块化

path模块

var path = require(“path”); //加载模块

path.dirname(url) 获取目录名

path.extname(url)获取后缀名

path.join([…paths]) 拼接路线

var url = “”;

var p1 = path.basename(url,”.html”);

console.log(p1); //path

var p2 = path.dirname(url);

console.log(p2); //

var p3 = path.extname(url);

console.log(p3); //.html

var p4 = path.join(__dirname, “./a”, “../b”, “c”);

console.log(p4); //E:\node\nodejs_2\b\c

3.websocket 营造实时应用(你猜作者画,录制直播)

全双工、双向数据、长连接的说道,h5新扩展个性

劳动器端可以积极向浏览器端发送音信

非得浏览器要协助,服务器要支持,数据传输格式是Frame

过程:第一遍是由客商端发起,央求的报文的号令头会多一些内容,须求服务器更动契约.

服务器端响应回报文,响应头也会多几条数据,之后就能够创立长的连接.

a. 发起倡议,跟日常的http诉求例外之处,

请求头 包括:

Sec-WebSocket-Key:asgK0L1sVa22xbiq8MU58w==

Sec-WebSocket-Version:13

Upgrade:websocket

让服务器更新切换契约 websocket

b. 服务器收到央求,upgrade

经过一定的步调算法 发生

Sec-WebSocket-Accept:IQcF4EGKE8sALj3PxJRvYQ1iG2Y

2.  npm init

npm install socketio express –save-dev

fs模块(读写文件)

var fs = require(“fs”);//加载模块

//异步读取文件

fs.readFile(“./readme.txt”,”utf8″, (err, data) => {

if(err) throw err;

console.log(data);

});

//同步读取文件 Synchrous

var data = fs.readFileSync(“./readme.txt”,”utf8″);

console.log(data);

//异步写入文件

fs.writeFile(“./test.txt”, “This is test content~~~”,(err) => {

if(err)throw err;

console.log(“写入成功”);

})

console.log(“write”);

//同步写入文件

fs.writeFileSync(“./test.txt”, “This is test content~~~”);

console.log(“write”);

翻看路线消息stat:fs.stat(path, (err, stat) => {})

fs.stat(“./test”, (err, stat) => {

if(err) throw err;

console.log(stat);

if(stat.isFile()) {

console.log(“该路径为文件”);

}else if (stat.isDirectory()) {

console.log(“该路径为文件夹”);

}

})

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图