WEB前端开发和调试的工具

前端开发在线课程:

http://yun.lu/student/course/list/8

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的最大优势,通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、js、css的开发效率。

2、chrome浏览器:

更多工具

开发者工具

dock side

在控制台中,输入信息,则可以在页面中显示出来;

可以显示调试的各种信息;

chrome中进行设置:

?

3、firefox浏览器

firefox中安装firebug

firefox中安装httprequester

4、使用HBulider进行web 页面开发:

HBuilder内置的web服务器只支持html静态页面,如果是动态页面,则需要使用外部web服务器;

http://127.0.0.1:8020/mobileWeb/index.html

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://127.0.0.1:8020/mobileWeb/firsthtml5.html

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的服务:

http://www.ittun.com

当启动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

时间: 2024-10-20 16:46:57

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

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

来源:http://www.cnblogs.com/jikey/p/3607133.html web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io,而这两个对他的支持是: sublime text 是所有编辑器里边支持emmet比较好的的唯一一款. webstorm是所有编辑器里边唯一内置emmet的一款,并且将emmet的精神往前推动的一款. php

听说优秀的Web前端开发工程师都会用这几个工具!

Web前端入行门槛低.薪资待遇高.市场需求大,是很多人进入IT行业的首选语言.工欲善其身必先利器,作为初学前端行业的小白,如果知道一些好用的软件工具可以帮助他们更好的工作.下面,就给大家分享Web前端开发工程师常用的工具. 1.Bootstrap Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式.表单.buttons.表格.网格系统等等. 2.Foundation Foundation是一个易用.强

web前端开发分享-目录

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

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

Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Windows.Linux 以及 OS X 平台. Brackets 的特点是简约.优雅.快捷!它没有很多的视图或者面板,也没太多花哨的功能,它的核心目标是减少在开发过程中那些效率低下的重复性工作,例如浏览器刷新,修改元素的样式,搜索功能等等.和 Sublime Text.Everedit 等通用代码编辑器

WEB前端开发工具总结

前端开发工具: web前端开发乃及其它的相关开发, 推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs.emmet.io,而这两个对他的支持是: sublime text 是所有编辑器里边支持emmet比较好的的唯一一款. webstorm是所有编辑器里边唯一内置emmet的一款,并且将emmet的精神往前推动的一款. webstorm针对前端er. 他们的详细对比: http://www.36ria

几个深有体会的WEB前端开发工具[转]

几个深有体会的WEB前端开发工具[转] 转自http://blog.csdn.net/Haiwiky/archive/2008/10/19/3100287.aspx 一.介绍2款前端小工具[取色工具和量距离工具] 1.取色工具——TakeColor 2.量距离工具(像素) 介绍下载请参见:http://www.css88.com/article.asp?id=483 二.JavaScript调试器VenKman[firefox插件] 三.IE WebDeveloper V2.3.2.108:点击

【转】十款让 Web 前端开发人员更轻松的实用工具

这篇文章介绍十款让 Web 前端开发人员生活更轻松的实用工具.每个 Web 开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具,所以如果下面这些工具对于你来说都是新的领域,那么这篇文章是非常有用的,因为这些实用的工具将让你的工作更有效率. Spritepad 借助 SpritePad,你可以在几分钟甚至几秒钟内创建你的 CSS 精灵.只需拖放您的图片,立即可以生成 PNG 精灵图片以及 CSS 代码.不需要在 Photosh

Web前端开发神器--WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版

WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版 http://www.jb51.net/softs/171905.html WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为“Web前端开发神器”.“最强大的HTML5编辑器”.“最智能的JavaScript IDE”等.与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能.

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

这篇文章介绍10款让Web前端开发人员生活更轻松的实用工具.每个Web开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具,所以如果下面这些工具对于你来说都是新的领域,那么这篇文章是非常有用的,因为这些实用的工具将让你的工作更有效率. Spritepad 借助 SpritePad,你可以在几分钟甚至几秒钟内创建你的CSS Sprite.只需拖放您的图片,立即可以生成 PNG 精灵图片以及CSS代码.不需要在 Photoshop