zoukankan      html  css  js  c++  java
  • 小菜的前端编程散谈(5)

    代码编辑和调试

    光说不练假把式,上篇已经给出了一些初级的编程题目。那么本篇就来说一说代码编辑和调试
    关于Javascript代码的编辑,有以下几种方式,这里列一下

    1. 使用编辑器,比如Sublime Text等编辑器,编辑完html文件,然后保存为html文件,然后使用浏览器打开,看效果。如果文件重新编辑保存,那么在浏览器中刷新一下就能看到更改之后的效果
    2. 使用编辑器和插件,比如Sublime Text等编辑器,配合一些插件,直接快速打开浏览器进行浏览,比如我安装了一个叫View in Browser插件,可以很方便的快速浏览查看效果 (随便选择)

    以上是针对HTML或者是Javascript中包含DOM操作的代码的测试方式,那么如果是纯粹的Javascript代码编程,应该如何编写和查看运行呢?

    1. 使用Node的REPL命令行进行测试,当然这个需要安装Node,安装完了之后,在cmd命令行中敲node,然后就进入交互式环境,可以运行javascript代码了。可以试试 [这个知道一下,暂时不用]
    2. 使用Chrome或者Firefox控制台进行Javascript交互,可以网上搜一下chrome控制台和firefox控制台。很方便的
    3. 直接在网页中使用console.log(...)打印javascript消息和结果,我的作业答案中的最后一道题的答案中就是这样的方式,使用浏览器打开之后,然后打开浏览器控制台(Chrome和Firefox中快捷键都是Ctrl+Shift+J,然后点击控制台,或者是Console),这个控制台有啥用呢?一方面可以输出网页中执行的Javascript消息结果(使用console.log打印的一些消息,或者错误也会打印出来),另一方面,自己在控制台中运行代码,可以直接打印出结果,可以试一下
    4. Firefox中的代码草稿纸(快捷键是Shift+F4)也不失为一种不错的选择,可以编写javascript代码,然后选中代码(或者变量等),然后“运行”、“查看”、或者“显示”,可以试试看,还是不错的

    OK,上面说了Javascript代码的编写和运行,那么Javascript代码的调试呢?调试的话,最好就是使用Chrome或者Firefox中的开发者工具了,一般的做法是打开开发者工具(Ctrl+Shift+J),然后切到“脚本”(在Chrome中应该是Source),找到你的Javascript代码,然后在代码的左侧边栏单击一下(就是行号的左边一点的地方),然后会出现一个红点,这个就叫断点,Javascript代码运行到这里会停下来,试一下,进断点之后,你可以查看当前作用域中各个变量的值,一般右侧有一个监控窗口,可以看到各个变量的值,不信你试试,这是非常实用的技巧。当然具体调试过程中一般还有几个调试指令,一般都有小按钮的,我这里说明一下

    1. 继续(快捷键F8),表示程序从当前断点一直往后跑,如果后面没有断点会一直往下跑,否则会进入断点
    2. 单步跳过(快捷键F10),表示程序越过当前这一步,跳到下一步。比如有两行代码,断点在第一行,那么按F10,会执行到下一行
    3. 单步进入(快捷键F11),表示断点从当前代码进入到代码内部,这个只针对有子函数或者子调用有效。比如当前代码是调用一个函数 var f = fib();那么单步进入之后,断点会进入到fib函数的内部去
    4. 单步跳出(快捷键Shift+F11),表示断点从当前函数中跳出到上一级调用,和单步进入互相配合使用,当然如果一直F10到最后,其实也会跳到上一级调用的

    OK,说完了代码调试,我建议还是自己试一把,一边执行代码一边看代码是如何运行的,然后看看那些变量的值是如何变化的。还是可以好好折腾一番的,这也算是基本功了,好好练一下!

    最后,我把上一篇的题目的答案放到附件里,我今天抽空写的,可以参考一下。看看你的实现方式和我有什么不一样的地方。其实斐波那契数列那个可以使用递归来做的,自己可以尝试用递归做一下

    提示一下:编程是个长期活,不要急躁慢慢来,我要讲的编程概念已经过了一半了。是不是觉得东西不多?其实真的不多,剩下的就是熟悉特定语言的特定特性,熟悉某些库某些接口某些内置的函数了,代码看得多了写得多了,一切顺理成章!

    编程题目实现代码下载

  • 相关阅读:
    vs2017 离线安装。
    c# begin & end.
    vc++ 下的WaitForSingleObject
    c# 工厂模式 ,委托 ,事件。
    微信分享 andriod studio
    mac osx 10.9 ftp server端口
    win32 调用多媒体函数PlaySound()
    [汇编语言]-第九章 在屏幕中间分别显示绿底红色,白底蓝色字符串"welcome to masm!"
    [汇编语言]-第九章 jcxz,loop指令,转移位移的意义
    补码
  • 原文地址:https://www.cnblogs.com/fecktty2013/p/4817175.html
Copyright © 2011-2022 走看看