前端开发在线课程:
 
1、HBuilder:WEB开发IDE工具
hbulider,内核是eclipse,Dcloud公司出品;
可以用builder 同时进行项目的编辑,可以和eclipse同步同时进行修改。这样可以利用到hbulider的强大的h5编辑功能;
从Frontpage、Dreamweaver、UE,到Sublime Text和JetBrains的WebStorm,Web编程的IDE已经更换了几批。HBuilder是DCloud(数字天堂)推出一款支持HTML5的Web开发IDE。
快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块等,大幅提升HTMLjscss的开发效率。
 
2、chrome浏览器:
更多工具
开发者工具
dock side
在控制台中,输入信息,则可以在页面中显示出来;
可以显示调试的各种信息;
chrome中进行设置:
 
3、firefox浏览器
firefox中安装firebug
firefox中安装httprequester
 
4、使用HBulider进行web 页面开发:
 
HBuilder内置的web服务器只支持html静态页面,如果是动态页面,则需要使用外部web服务器;
 
 
5、使用chrome浏览器进行调试:
JS调试语句:
console.log(“hello”);//普通日志
console.info();//普通消息
console.warm();//告警消息
console.error();//错误消息
window.alert();调试语句
直接使用alert也可以弹出:
alert(‘i love you’);
 
6、外网访问和反向代理
ip地址:localhost对应的是127.0.0.1
动态分配的192.168.41.126
http://192.168.41.126:8020/mobileWeb/firsthtml5.html 也可以显示和访问
 
firefox的二维码,可以通过扫描来访问:
 
 
手机安装浏览器猎豹,扫描二维码,用微信就可以扫描此二维码,显示出此网页出来。可以通过二维码发布一个网页。
 
将本地地址映射为XXX,发布到公网上,主要使用ngrok,实际上是一个反向代理。
ngrok是一个反向代理,可以从公网建立一个安全隧道到本地的web服务。ngrok 抓取和分析所有的经过数据,用于之后的检查和重放。
http://www.cnblogs.com/wangshuo1/p/4502459.html 微信学习总结 02 ngrok 部署本机代码,使外网可以访问。
 
https://ngrok.com/download 这个上面下载,不能使用了。使用国内提供的一个ngrok的服务:
 
 
当启动ngrok服务之后,验证能否访问tomcat服务;
http://127.0.0.1:8080 这是tomcat对外默认端口
打开ngrok it tun之后:
it tun提供一个服务,http:// XXX.ittun.com 映射为 http://127.0.0.1:8080
这样就可以通过访问http:// XXX.ittun.com,来访问内部网页了,就可以用手机二维码来扫描
通过ngrok命令设置监听的端口
 
启动ngrok服务,监听端口:
ngrok 8020
ngrok 8080
 
 

WEB前端开发和调试的工具的更多相关文章

  1. 4. web前端开发分享-css,js工具篇

    web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...

  2. web前端开发分享-css,js工具篇

    web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io, ...

  3. web前端开发分享-目录

    1. web前端开发分享-css,js入门篇 2. web前端开发分享-css,js进阶篇 3. web前端开发分享-css,js提高篇 4. web前端开发分享-css,js工具篇 5. web前端 ...

  4. 【转】 web前端开发分享-目录

    http://www.cnblogs.com/jikey/p/3613082.html 1. web前端开发分享-css,js入门篇 2. web前端开发分享-css,js进阶篇 3. web前端开发 ...

  5. Web前端开发工具总结

    前端开发工具: web前端开发乃及其它的相关开发, 推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs. ...

  6. Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

    Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...

  7. WebStorm for Mac(Web 前端开发工具)破解版安装

    1.软件简介    WebStorm 是 jetbrains 公司旗下一款 JavaScript 开发工具.目前已经被广大中国 JS 开发者誉为 "Web 前端开发神器".&quo ...

  8. 10款让WEB前端开发人员更轻松的实用工具

    这篇文章介绍10款让Web前端开发人员生活更轻松的实用工具.每个Web开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具,所以如 ...

  9. 十款让 Web 前端开发人员更轻松的实用工具

    这篇文章介绍十款让 Web 前端开发人员生活更轻松的实用工具.每个 Web 开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具, ...

随机推荐

  1. [原]quick2.25精灵变灰

    由于quick2.25没有导出shader相应的接口,所以2.25无法直接使用shader. 本文简单介绍如何导出相应接口,同时教大家使用shader 实现精灵变灰 一.编写静态函数,以供导出使用(直 ...

  2. iOS方法类:CGAffineTransform的使用大概

    CoreGraphics框架中的CGAffineTransform类可用于设定UIView的transform属性,控制视图的缩放.旋转和平移操作: 另称放射变换矩阵,可参照线性代数的矩阵实现方式0. ...

  3. Spring进阶教程之在ApplicationContext初始化完成后重定义Bean

    前言 很久没有写博客了,也是两个原因:一是自己觉得一直在班门弄斧,其实自己没什么技术可言:二是很多朋友的问题实际上可以自行解决,我经常觉得不该我来过问,或者是有时候我认为技术还得靠自己钻研,我一两句话 ...

  4. android学习者优秀网址推荐

    非常漂亮的android UI库集合,别人整理的,如果感觉不错,赶快收藏吧!! https://github.com/wasabeef/awesome-android-ui https://githu ...

  5. url rewrite

    http://www.microsoft.com/taiwan/technet/iis/expand/URLRewrite.aspx http://www.iis.net/learn/extensio ...

  6. CenOS6.3 ssh 公钥认证报错:Permission denied (publickey,gssapi-keyex,gssapi-with-mic)

    转载自 http://laowafang.blog.51cto.com/251518/1364298 1.说明: ssh无密码用户远程登录,一直以来使用是debian操作系统,对用户目录权限要求没有关 ...

  7. 发现新大陆-JMX

    今天接触到这个东西,觉得好有趣,可以用很多第三方的显示层jar包直接在UI界面上操作指定的java对象,网上将这个东西的也挺多的,我个人觉得这个比webServer还强大了.webserver只是公布 ...

  8. php日期处理 -- 获取本周和上周的开始日期和结束日期(备忘)

    Learn From: http://www.phpernote.com/php-function/1019.html 直接贴代码: <?php header('Content-type: te ...

  9. Java序列化中的serialVersionUID有什么用?

    如果一个实现了Serializable的类没有serialVersionUID属性,IDE(比如Eclipse)通常会报这样一个warning: The serializable class Foo ...

  10. Android学习笔记之Json的使用....

    PS:当你的能力还驾驭不了你的目标时,那你需要沉下心来历练... 学习内容: 1.Json的使用... 2.Json信息过滤... 3.从网络上获取Json数据... 4.解析Json数据获取各个属性 ...