VSCode配合chrome浏览器调试cocos2d js项目
1.准备阶段
具备调试功能的VSCode(我的是在win10上,版本是1.17.1)
在VSCode里下载安装Debugger for Chrome扩展插件。
2.具体操作
创建一个cocosjs工程 cocos new coco315Pro -l js -d 你的路径 -p 包名
使用VSCode打开这个工程。 Ctrl + o
由于cocosjs会加载json文件,所以需要把他部署到一个本地服务器上。我用nodejs创建了一个简单的http服务器,但是不好使,虽然index.html会正常发到浏览器上,但是脚本加载的时候会报unexpected token <的错误。我记得cocos提供的命令cocos run -p web会先启动一个本地服务器,所以通过查阅cocos.py,定位到引擎目录下的tools/cocos2d-console/plugins/plugin_run下的project_run.py里使用BaseHTTPServer创建了一个本地的http服务器。同时打开浏览器,访问127.0.0.1:8000。
def run_web(self, dependencies):
if not self._platforms.is_web_active():
return from SimpleHTTPServer import SimpleHTTPRequestHandler
HandlerClass = SimpleHTTPRequestHandler
ServerClass = BaseHTTPServer.HTTPServer
Protocol = "HTTP/1.0"
HandlerClass.protocol_version = Protocol host = self._host
if self._port is None:
port = 8000
port_max_add = 2000
else:
port = int(self._port)
port_max_add = 0 deploy_dep = dependencies['deploy']
run_root = deploy_dep.run_root i = 0
httpd = None
while (i <= port_max_add):
port += i
i += 1
server_address = (host, port)
try:
cocos.Logging.info(MultiLanguage.get_string('RUN_INFO_HOST_PORT_FMT', (host, port)))
httpd = ServerClass(server_address, HandlerClass)
except Exception as e:
httpd = None
cocos.Logging.warning(MultiLanguage.get_string('RUN_WARNING_SERVER_FAILED_FMT', (host, port, e))) if httpd is not None:
break if httpd is None:
raise cocos.CCPluginError(MultiLanguage.get_string('RUN_ERROR_START_SERVER_FAILED'),
cocos.CCPluginError.ERROR_OTHERS) # from threading import Thread
# sub_url = deploy_dep.sub_url
# url = 'http://%s:%s%s' % (host, port, sub_url)
# thread = Thread(target = self.open_webbrowser, args = (url,))
# thread.start() sa = httpd.socket.getsockname()
with cocos.pushd(run_root):
cocos.Logging.info(MultiLanguage.get_string('RUN_INFO_SERVING_FMT', (sa[0], sa[1])))
httpd.serve_forever()- 我们把启动浏览器的代码注释掉:
# from threading import Thread
# sub_url = deploy_dep.sub_url
# url = 'http://%s:%s%s' % (host, port, sub_url)
# thread = Thread(target = self.open_webbrowser, args = (url,))
# thread.start() 点击VSCode左边栏的Debug图标(甲虫图案),自动弹出一个launch.json文件让你配置。可以参考https://go.microsoft.com/fwlink/?linkid=830387。
我是这样配置的:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch localhost",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8000",
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
}
]
}
3.开始调试
- 我们先在cmd里输入:
cocos run -p web
- 然后你就可以打断点,F5调试了
等我在详细看一下nodejs,再写一个nodejs启一个本地服务器的做法。
VSCode配合chrome浏览器调试cocos2d js项目的更多相关文章
- vscode使用Chrome浏览器调试不好用,解决方法!!
1.如果你是刚下载vscode,那么你需要下载两个插件. 1. open in browser(在浏览器中查看,支持五大主流浏览器),下载并启用. 2. view-in-browser (在浏览器中查 ...
- VSCode调试Html中的脚本 vscode前端常用插件推荐,搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for Chrome调试js
一.背景 使用Visual Studio Code写了一个简单的Html页面,想调试下其中script标签里的javascript代码,网上查了一通,基本都是复制粘贴或者大同小异的文章,就是要安装De ...
- vsCode 添加浏览器调试和js调试的方法总结
vsCode 添加浏览器调试和js调试的方法 1.直接按F5可以调试的方法或者点击运行按钮(可以直接运行html文件或者js文件) 在launch.json文件中的配置如下: { " ...
- chrome浏览器调试线上文件映射本地文件
chrome浏览器调试线上文件映射本地文件 通过ReRes让chrome拥有路径映射的autoResponse功能. 前端开发过程中,经常会有需要对远程环境调试的需求.比如,修改线上bug,开发环境不 ...
- Google Chrome浏览器调试入门————转载只为自己查看方便
Google Chrome浏览器调试 作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/20 ...
- chrome浏览器调试功能之后端篇
作为后端开发人员,可能有很多同学不怎么了解chrome调试功能,而即将成为大神的我们,怎么也得会,知其然更要知其所以然,今天我带领大家好好的梳理一下,chrome浏览器调试,个人把它分成了前端功能和后 ...
- 【js】IE、FF、Chrome浏览器中的JS差异介绍
如何判断浏览器类型 转:http://www.cnblogs.com/carekee/articles/1854674.html 1.通过浏览器特有的对象 如ie 的ActiveXObject ff ...
- flex chrome浏览器调试flex程序
flex chrome浏览器调试出现空白的解决方法: 1,为chrome安装flash player,禁用chrome自带的flash player:参考:http://www.jb51.net/ar ...
- 【原】无脑操作:Chrome浏览器安装Vue.js devtool
学习Vue.js时,Chrome浏览器安装Vue.js devtool能很方便的查看Vue对象.组件.事件等. 本文以Chrome浏览器插件Vue.js devtools_3.1.2_0.crx的安装 ...
随机推荐
- JVM内存模型及配置参数
JVM 分为堆.栈.方法区.程序计数器.本地方法栈 栈内存存放局部变量表.操作栈.动态链接.方法出口等信息 1. 局部变量表存放了编译期可知的各种基本数据类型(boolean.byte.char.s ...
- Java 语言实现 MD5 加密
Java 语言实现 MD5 加密 背景说明 在实际项目中,为了安全性考虑,经常要求账号密码是以加密后的密文形式,保存到数据库中. 这样,即使有人获取到了数据库中的密文密码,也不知道明文密码信息是什么, ...
- 事件冒泡 --- 仿select下拉框
要求:点击按钮时,下拉框显示:点击页面其他部分时,下拉框消失: 1. 不靠谱代码 <!DOCTYPE html> <html> <head lang="en&q ...
- 【TypeScript】学习笔记 把一些需要记的记录一下
安装typescript: npm install -g typescript 启动typesctipt自动编译: tsc 文件名.ts --watch 函数参数默认值: 1.有默认值参数的,声明在最 ...
- js动态修改浏览器title
script标签依据浏览框的失焦获焦进行函数操作(操作简单放到HTML文件下的head标签下就可以) <script> window.onfocus = function () { doc ...
- @Value注解
1.注入 基本字符 public class Student { @Value("qq") private String name; @Value("12") ...
- Linux文件权限码
权限 二进制值 八进制值 描述 --- 000 0 没有任何权限 --x 001 1 只有执行权限 -w- 010 2 只有写入权限 -wx 011 3 有写入和执行权限 r-- 100 4 只有读取 ...
- 【Python开发】python使用urllib2抓取防爬取链接
前几天刚看完<Linux/Unix设计思想>,真是一本不错的书,推荐想提高自己代码质量的童鞋看一下,里面经常提到要以小为美,一个程序做好一件事,短小精悍,因此我也按照这种思想来写pytho ...
- Push failed: Failed with error: Could not read from remote repository. IDEA 解决方法
- flask_migrate 的应用
怎么查看的命令: python manage.py --help 使用flask_migrate的注意事项: