1.准备阶段

  1. 具备调试功能的VSCode(我的是在win10上,版本是1.17.1)

  2. 在VSCode里下载安装Debugger for Chrome扩展插件。

2.具体操作

  1. 创建一个cocosjs工程 cocos new coco315Pro -l js -d 你的路径 -p 包名

  2. 使用VSCode打开这个工程。 Ctrl + o

  3. 由于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()
  4. 我们把启动浏览器的代码注释掉:
       # 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()
  5. 点击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.开始调试

  1. 我们先在cmd里输入:

    cocos run -p web
  2. 然后你就可以打断点,F5调试了

    等我在详细看一下nodejs,再写一个nodejs启一个本地服务器的做法。

VSCode配合chrome浏览器调试cocos2d js项目的更多相关文章

  1. vscode使用Chrome浏览器调试不好用,解决方法!!

    1.如果你是刚下载vscode,那么你需要下载两个插件. 1. open in browser(在浏览器中查看,支持五大主流浏览器),下载并启用. 2. view-in-browser (在浏览器中查 ...

  2. VSCode调试Html中的脚本 vscode前端常用插件推荐,搭建JQuery、Vue等开发环境 vsCode 添加浏览器调试和js调试的方法总结 VS Code - Debugger for Chrome调试js

    一.背景 使用Visual Studio Code写了一个简单的Html页面,想调试下其中script标签里的javascript代码,网上查了一通,基本都是复制粘贴或者大同小异的文章,就是要安装De ...

  3. vsCode 添加浏览器调试和js调试的方法总结

    vsCode 添加浏览器调试和js调试的方法 1.直接按F5可以调试的方法或者点击运行按钮(可以直接运行html文件或者js文件) 在launch.json文件中的配置如下: {     " ...

  4. chrome浏览器调试线上文件映射本地文件

    chrome浏览器调试线上文件映射本地文件 通过ReRes让chrome拥有路径映射的autoResponse功能. 前端开发过程中,经常会有需要对远程环境调试的需求.比如,修改线上bug,开发环境不 ...

  5. Google Chrome浏览器调试入门————转载只为自己查看方便

    Google Chrome浏览器调试 作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/20 ...

  6. chrome浏览器调试功能之后端篇

    作为后端开发人员,可能有很多同学不怎么了解chrome调试功能,而即将成为大神的我们,怎么也得会,知其然更要知其所以然,今天我带领大家好好的梳理一下,chrome浏览器调试,个人把它分成了前端功能和后 ...

  7. 【js】IE、FF、Chrome浏览器中的JS差异介绍

    如何判断浏览器类型 转:http://www.cnblogs.com/carekee/articles/1854674.html 1.通过浏览器特有的对象 如ie 的ActiveXObject  ff ...

  8. flex chrome浏览器调试flex程序

    flex chrome浏览器调试出现空白的解决方法: 1,为chrome安装flash player,禁用chrome自带的flash player:参考:http://www.jb51.net/ar ...

  9. 【原】无脑操作:Chrome浏览器安装Vue.js devtool

    学习Vue.js时,Chrome浏览器安装Vue.js devtool能很方便的查看Vue对象.组件.事件等. 本文以Chrome浏览器插件Vue.js devtools_3.1.2_0.crx的安装 ...

随机推荐

  1. JVM内存模型及配置参数

    JVM 分为堆.栈.方法区.程序计数器.本地方法栈 栈内存存放局部变量表.操作栈.动态链接.方法出口等信息 1.  局部变量表存放了编译期可知的各种基本数据类型(boolean.byte.char.s ...

  2. Java 语言实现 MD5 加密

    Java 语言实现 MD5 加密 背景说明 在实际项目中,为了安全性考虑,经常要求账号密码是以加密后的密文形式,保存到数据库中. 这样,即使有人获取到了数据库中的密文密码,也不知道明文密码信息是什么, ...

  3. 事件冒泡 --- 仿select下拉框

    要求:点击按钮时,下拉框显示:点击页面其他部分时,下拉框消失: 1. 不靠谱代码 <!DOCTYPE html> <html> <head lang="en&q ...

  4. 【TypeScript】学习笔记 把一些需要记的记录一下

    安装typescript: npm install -g typescript 启动typesctipt自动编译: tsc 文件名.ts --watch 函数参数默认值: 1.有默认值参数的,声明在最 ...

  5. js动态修改浏览器title

    script标签依据浏览框的失焦获焦进行函数操作(操作简单放到HTML文件下的head标签下就可以) <script> window.onfocus = function () { doc ...

  6. @Value注解

    1.注入 基本字符 public class Student { @Value("qq") private String name; @Value("12") ...

  7. Linux文件权限码

    权限 二进制值 八进制值 描述 --- 000 0 没有任何权限 --x 001 1 只有执行权限 -w- 010 2 只有写入权限 -wx 011 3 有写入和执行权限 r-- 100 4 只有读取 ...

  8. 【Python开发】python使用urllib2抓取防爬取链接

    前几天刚看完<Linux/Unix设计思想>,真是一本不错的书,推荐想提高自己代码质量的童鞋看一下,里面经常提到要以小为美,一个程序做好一件事,短小精悍,因此我也按照这种思想来写pytho ...

  9. Push failed: Failed with error: Could not read from remote repository. IDEA 解决方法

  10. flask_migrate 的应用

    怎么查看的命令: python manage.py --help 使用flask_migrate的注意事项: