前端代码调试方法、装置、计算机设备及计算机存储介质与流程

1.本申请涉及研发管理技术领域，尤其涉及一种前端代码调试方法、装置、计算机设备及计算机可读存储介质。


背景技术：

2.在前端领域的生产开发中，经常需要通过在编辑器或浏览器中打印日志进行相关代码调试。传统技术中，一般通过手动编写进行调试所对应的打印日志代码，比较耗时耗力，且容易出错，从而导致对前端代码的调试效率较低。


技术实现要素：

3.本申请提供了一种前端代码调试方法、装置、计算机设备及计算机可读存储介质，能够解决传统技术中对页面前端所对应的前端代码的调试效率较低的技术问题。
4.第一方面，本申请提供了一种前端代码调试方法，包括：启动进行代码调试所对应的预设编辑器插件，并基于所述预设编辑器插件，接收用户输入待进行调试的前端代码所包含的预设字段；响应于对所述预设字段进行调试的启动调试指令，获取所述预设字段；根据所述预设字段，调取所述预设字段相对应的预设调试模板；根据所述预设调试模板，将所述预设字段嵌入所述预设调试模板，以得到目标调试代码，并对所述目标调试代码进行调试，以实现对所述前端代码进行调试。
5.第二方面，本申请还提供了一种前端代码调试装置，包括：接收单元，用于启动进行代码调试所对应的预设编辑器插件，并基于所述预设编辑器插件，接收用户输入待进行调试的前端代码所包含的预设字段；第一获取单元，用于响应于对所述预设字段进行调试的启动调试指令，获取所述预设字段；调取单元，用于根据所述预设字段，调取所述预设字段相对应的预设调试模板；调试单元，用于根据所述预设调试模板，将所述预设字段嵌入所述预设调试模板，以得到目标调试代码，并对所述目标调试代码进行调试，以实现对所述前端代码进行调试。
6.第三方面，本申请还提供了一种计算机设备，其包括存储器及处理器，所述存储器上存储有计算机程序，所述处理器执行所述计算机程序时实现所述前端代码调试方法的步骤。
7.第四方面，本申请还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时使所述处理器执行所述前端代码调试方法的步骤。
8.本申请提供了一种前端代码调试方法、装置、计算机设备及计算机可读存储介质。本申请通过启动进行代码调试所对应的预设编辑器插件，并基于所述预设编辑器插件，接收用户输入待进行调试的前端代码所包含的预设字段，响应于对所述预设字段进行调试的启动调试指令，获取所述预设字段，根据所述预设字段，调取所述预设字段相对应的预设调试模板，根据所述预设调试模板，将所述预设字段嵌入所述预设调试模板，以得到目标调试
代码，并对所述目标调试代码进行调试，以实现对所述前端代码进行调试，从而基于预设编辑器插件，将前端代码中出现问题的预设字段脱离开所述前端代码所对应的原始处理逻辑，并将所述预设字段嵌入至所述预设字段相对应的预设调试模板，以对所述预设字段进行调试，从而等同于对包含所述预设字段的前端代码的调试，并且可以重复使用所述预设编辑器插件，以对不同的出现问题的预设字段进行对应调试，相比传统技术中通过手动编写打印日志，本申请实施例对前端代码进行调试时，耗时耗力较少，且避免了手动编写打印日志出错的可能性，提高了对前端代码进行调试的效率和准确性。
附图说明
9.为了更清楚地说明本申请实施例技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
10.图1为本申请实施例提供的前端代码调试方法的一个流程示意图；
11.图2为本申请实施例提供的前端代码调试方法的第一个子流程示意图；
12.图3为本申请实施例提供的前端代码调试方法的第二个子流程示意图；
13.图4为本申请实施例提供的前端代码调试方法的第三个子流程示意图；
14.图5为本申请实施例提供的前端代码调试方法的第四个子流程示意图；
15.图6为本申请实施例提供的前端代码调试方法的第五个子流程示意图；
16.图7为本申请实施例提供的前端代码调试装置的一个示意性框图；以及
17.图8为本申请实施例提供的计算机设备的示意性框图。
具体实施方式
18.下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
19.应当理解，当在本说明书和所附权利要求书中使用时，术语“包括”和“包含”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。
20.请参阅图1，图1为本申请实施例提供的前端代码调试方法的一个流程示意图。如图1所示，该方法包括以下步骤s11
‑
s14：
21.s11、启动进行代码调试所对应的预设编辑器插件，并基于所述预设编辑器插件，接收用户输入待进行调试的前端代码所包含的预设字段。
22.s12、响应于对所述预设字段进行调试的启动调试指令，获取所述预设字段。
23.其中，所述前端代码为前端页面所对应的代码。
24.具体地，前端页面所对应的前端代码出现问题时，一般为前端代码中所包含的预设字段出现了问题，例如预设字段不能正常显示，例如预设字段出现空白或者出现乱码等，需要前端开发人员或者维护人员对该出现问题的前端代码进行调试，以确定导致问题的原因，并对前端代码所包含的字段进行维护，即维护人员需要对前端代码中出现问题的确定
的预设字段进行调试。对前端代码进行调试可以转换为通过对前端代码中所包含的出现问题的预设字段进行调试。本申请实施例中通过对前端页面所对应的前端代码中所包含的预设字段进行调试，以实现对前端页面所对应的前端代码进行调试。在对前端页面中所包含的预设字段进行调试时，在前端的控制台或浏览器端中预先安装编辑器插件，基于前端所安装的预设编辑器插件对待调试的前端页面所对应的前端代码进行调试。进行前端代码调试时，启动前端预先安装的进行代码调试所对应的预设编辑器插件，然后用户基于所述预设编辑器插件，通过预设的输入形式输入需要进行调试前端页面中所包含的预设字段，例如用户通过预设的输入文本框输入需要进行调试前端页面中所包含的预设字段，然后用户再启动对所述预设字段进行调试，计算机设备响应于用户启动对所述预设字段进行调试的启动调试指令，获取用户输入的待进行调试的预设字段。
25.s13、根据所述预设字段，调取所述预设字段相对应的预设调试模板。
26.具体地，针对调试需要实现的目的，对预设调试字段预先设置相对应的预设调试模板，例如，针对调试字段，设置相对应的预设打印模板，以对调试字段进行打印。获取所述预设字段后，根据所述预设字段，调取所述预设字段相对应的预设调试模板。例如，若前端页面上字段openid的值显示不正常，即前端页面所对应的前端代码中所包含的预设字段openid的值无法正常显示，需要对预设字段openid进行调试，也即需要对所述前端代码进行调试时，可以通过对前端代码所包含的openid的值进行调试，前端的维护人员或者开发人员启动进行代码调试所对应的预设编辑器插件，并通过预设编辑器插件输入预设字段openid，再启动对所述预设字段openid进行调试的启动调试指令，计算机设备响应于对预设字段openid进行调试的启动调试指令，获取用户输入的待进行调试的所述预设字段openid，再根据所述预设字段openid，调取所述预设字段openid相对应的预设调试模板，例如，调取所述预设字段openid相对应的预设打印模板，通过对所述预设字段openid的值进行打印，以对所述预设字段openid进行调试，从而实现对包含所述预设字段openid的前端代码进行调试。
27.s14、根据所述预设调试模板，将所述预设字段嵌入所述预设调试模板，以得到目标调试代码，并对所述目标调试代码进行调试，以实现对所述前端代码进行调试。
28.具体地，获取待进行调试的预设字段及所述预设字段所对应的预设调试模板后，将所述预设字段嵌入至所述预设调试模板中相对应的预设位置，以得到目标调试代码，然后对所述目标代码进行调试，从而实现对所述预设字段进行调试，也即实现了对包含所述预设字段的前端页面所对应的前端代码进行调试，从而得到前端代码所对应的调试结果。例如，在预设打印模板中，获取待进行调试的预设字段及所述预设字段所对应的预设打印模板后，将所述预设字段嵌入至所述预设打印模板中相对应的预设位置，以得到目标打印日志代码，从而针对进行调试的预设字段实现自动键入打印日志代码，然后对所述预设字段进行打印日志，以实现对所述预设字段进行调试。
29.本申请实施例中，通过启动进行代码调试所对应的预设编辑器插件，并基于所述预设编辑器插件，接收用户输入待进行调试的前端代码所包含的预设字段，响应于对所述预设字段进行调试的启动调试指令，获取所述预设字段，根据所述预设字段，调取所述预设字段相对应的预设调试模板，根据所述预设调试模板，将所述预设字段嵌入所述预设调试模板，以得到目标调试代码，并对所述目标调试代码进行调试，以实现对所述前端代码进行
调试，从而基于预设编辑器插件，将前端代码中出现问题的预设字段脱离开所述前端代码所对应的原始处理逻辑，并将所述预设字段嵌入至所述预设字段相对应的预设调试模板，以对所述预设字段进行调试，从而等同于对包含所述预设字段的前端代码的调试，并且可以重复使用所述预设编辑器插件，以对不同的出现问题的预设字段进行对应调试，相比传统技术中通过手动编写打印日志，本申请实施例对前端代码进行调试时，耗时耗力较少，且避免了手动编写打印日志出错的可能性，提高了对前端代码进行调试的效率和准确性。
30.请参阅图2，图2为本申请实施例提供的前端代码调试方法的第一个子流程示意图。如图2所示，在该实施例中，所述响应于对所述预设字段进行调试的启动调试指令的步骤包括：
31.s21、监测所述启动调试指令所对应的预设调试快捷键；
32.s22、若监测到所述预设调试快捷键被触发，执行所述响应于对所述预设字段进行调试的启动调试指令的步骤。
33.具体地，在预设编辑器插件中，可以设置各种快捷键以实现各种不同的功能，快捷键的监听在编辑器插件项目文件中的package.json中进行配置，从而可以选择不同的快捷键来触发插件效果。例如，可以针对启动调试指令预先设置相对应的预设调试快捷键，当所述预设调试快捷键被触发时，表明启动对所述代码进行调试的调试指令。例如，在一示例中，设置所述启动调试指令所对应的预设调试快捷键为command+shift+l，在使用时选取需要在日志平台输出的相关值的名字，按下相应调试快捷键command+shift+l，则可以自动键入预设调试模板，例如预设打印模板，从而打印预设字段所对应的日志的代码。例如，当需要在控制台打印openid的值，用户输入预设字段openid，用户按下键盘快捷键command+shift+l，响应于对所述预设字段openid进行调试的启动调试指令，编辑器插件对所述预设字段openid进行调试，并自动在代码下一行键入了日志代码，如下所示：
34.const openid＝geturlparam(
‘
openid’)？geturlparam(
‘
openid’):”35.console.log(
‘
openid:’,openid)；
36.若需要打印出空白日志而不是某一个变量的日志时，可以直接在代码内容的空白处，按下快捷键command+shift+l；如下所示：
37.var console:console；
38.console.log()；
39.从而可以通过启动调试指令所对应的预设调试快捷键，自动键入所获取的预设字段的值所对应的日志代码的预设模板，相比传统技术中通过手动编写调试代码，本申请实施例中通过基于预设编辑器插件的自动进行调试，减少了开发人员编写调试日志的代码量，并且降低了手动输入时出错的概率。
40.请参阅图3，图3为本申请实施例提供的前端代码调试方法的第二个子流程示意图。如图3所示，在该实施例中，所述根据所述预设调试模板，将所述预设字段嵌入所述预设调试模板，以得到目标调试代码的步骤包括：
41.s31、根据所述预设调试模板，触发预设插入方法；
42.s32、获取所述预设字段及所述预设字段在所述预设调试模板中所对应的目标位置；
43.s33、将所述预设字段插入所述预设目标位置，以得到目标调试代码。
44.具体地，预设编辑器插件获取编辑器的全局对象中的activetexteditor(vscode.window.activetexteditor)，以监听用户选择预设字段的操作，当监听到用户选取预设字段时，若用户触发了启动调试指令，例如触发了所述启动调试指令所对应的预设调试快捷键，则触发预设inserttext函数，预设inserttext函数先通过编辑器插件对象editor获取用户输入的预设字段，并根据所述预设字段获取所述预设字段在所述预设调试模板中所对应的目标位置，在获得的所述目标位置处，通过预设inserttext函数插入所述预设字段，以得到目标调试代码，从而代替用户手动编写调试代码时在调试代码中键入所述预设字段，实现了基于预设编辑器插件，通过调用所述预设字段所对应的预设调试模板，将所述预设字段插入所述预设调试模板中的相对应的目标位置，以得到目标调试代码，即打印日志的代码，并对目标调试代码进行调试，以实现调试时的打印日志。
45.请参阅图4，图4为本申请实施例提供的前端代码调试方法的第三个子流程示意图。如图4所示，在该实施例中，所述根据所述预设调试模板，触发预设插入方法的步骤之前，还包括：
46.s41、判断所述预设字段是否为单个字段；
47.s42、若所述预设字段为单个字段，执行所述根据所述预设调试模板，触发预设插入方法的步骤；
48.s43、若所述预设字段为多个字段，迭代执行所述根据所述预设调试模板，触发预设插入方法的步骤，直至对每个所述预设字段均生成了各自所对应的目标调试代码。
49.具体地，针对前端页面中一个预设字段出现问题的情形，直接执行根据所述预设调试模板，将所述预设字段嵌入所述预设调试模板，以得到目标调试代码的步骤即可生成所述预设字段所对应的目标调试代码。若前端页面中多个预设字段均存在问题，例如，存在多个预设字段均无法正常显示，多个预设字段均为空白或者乱码的情形，需要对多个预设字段进行调试，在本申请实施例中，可以同时对多个预设字段同时进行调试，例如，若存在a字段、b字段、c字段、d字段、e字段及f字段均存在问题，需要对abcdef字段同时进行调试，需要对abcdef各自分别执行根据所述预设调试模板，触发预设插入方法，获取所述预设字段及所述预设字段在所述预设调试模板中所对应的目标位置，将所述预设字段插入所述预设目标位置的过程，即对abcdef循环执行上述过程，以生成abcdef各自所对应的目标调试代码，并将所有所述目标调试代码进行拼接，以生成整个前端页面所对应的总目标调试代码，并对所述总目标调试代码进行调试，以实现对所述前端代码进行调试，尤其针对需要对前端页面中的多个预设字段同时需要进行调试的情形，相比传统技术中通过手动编写打印日志，本申请实施例对前端代码进行调试时，进一步耗时耗力较少，且避免了手动编写打印日志出错的可能性，提高了对前端代码进行调试的效率和准确性。
50.在一实施例中，所述对所述目标调试代码进行调试的步骤包括：
51.根据所述预设字段的调试结果所对应的预设样式参数，将所述预设字段所对应的调试结果进行日志打印。
52.进一步地，请参阅图5，图5为本申请实施例提供的前端代码调试方法的第四个子流程示意图。如图5所示，在该实施例中，所述根据所述预设字段的调试结果所对应的预设样式参数，将所述预设字段所对应的调试结果进行日志打印的步骤包括：
53.s51、获取所述预设编辑器插件中所包含的所述预设字段的调试结果所对应的预
设日志背景色、预设字体及预设字体颜色；
54.s52、根据所述预设日志背景色、所述预设字体及所述预设字体颜色，将所述预设字段所对应的调试结果进行日志打印。
55.具体地，基于预设编辑器插件对前端代码进行调试时，还可以在预设编辑器插件原有的日志语句中新增所述预设字段的调试结果所对应的样式参数，即对所述预设字段所对应的调试结果进行样式参数设置，进而通过预设样式参数对所述调试结果进行日志打印，可以获取所述预设编辑器插件中所包含的所述预设字段的调试结果所对应的预设日志背景色、预设字体与预设字体颜色，例如，日志颜色可以通过高亮形式、黑色日志背景色与红色字体的形式进行显示，从而根据所述预设日志背景色、所述预设字体与所述预设字体颜色，将所述预设字段所对应的调试结果进行日志打印，以便于开发人员对打印日志进行预设的突出展示，优化调试日志的展示效果，以便于开发人员更清晰的查找与梳理日志，方便前端开发人员清晰醒目的在控制台或浏览器端查看相关调试日志，提高对调试结果的处理效率。例如，在打印日志模板中，当监听到客户按下进行预设字段调试所对应的快捷键时，触发键入日志代码方法，在使用insert函数时，在即将键入日志代码时，先对日志进行颜色字体设置，设置完成后再进行日志代码的键入，此时在控制台上能看到预设设定的颜色与字体大小等，从而实现自定义日志样式，通过对输出日志背景色、字体大小及颜色等的日志样式设置，是得日志可以进行针对性的展示，以便于问题定位与调试。
56.请参阅图6，图6为本申请实施例提供的前端代码调试方法的第五个子流程示意图。如图6所示，在该实施例中，所述根据所述预设调试模板，将所述预设字段嵌入所述预设调试模板，以得到目标调试代码，并对所述目标调试代码进行调试，以实现对所述前端代码进行调试的步骤之后，还包括：
57.s61、监测删除日志代码所对应的预设删除快捷键；
58.s62、若监测到所述预设删除快捷键被触发，通过预设筛选方式获取所述预设字段所对应生成的日志代码，并将所述日志代码进行删除。
59.具体地，在对所述预设字段进行调试完成后，会生成所述预设字段所对应的日志代码，这些对所述预设字段进行调试所对应生成的日志代码，存放在项目代码中会显得多余，并且影响项目影响性能。在对预设字段所对应的功能调试完成，或者问题排查定位验证通过后，项目代码中不需要保留所述预设字段所对应的日志代码，传统人工进行前端代码调试过程中，是在代码文件中一行行的查找日志代码，并手动进行删除操作，这样效率低下，还容易误操作，而导致删除部分项目逻辑代码而造成bug。在本申请实施例中，针对进行调试生成的日志代码，预先设置所对应的预设删除快捷键，监测删除日志代码所对应的预设删除快捷键，若监测到所述预设删除快捷键被触发，通过预设筛选方式获取所述预设字段所对应生成的日志代码，例如可以通过预设正则表达式进行匹配的方式筛选出与所述预设字段所对应的日志代码，并将所述日志代码进行删除，从而可以实现一键批量删除日志，只需要按下键盘上相对应的预设删除快捷键即可实现对生成的日志代码的删除。例如，以mac os操作系统为例，生成的日志代码所对应的预设删除快捷键可以设置为：shift+cmd+d。windows系统同样可以配置快捷键，预设删除快捷键可以在预设编辑器插件的package.json文件中提前配置完成，通过一键删除日志代码，既节省了开发人员上线前手动删除日志的工作量，也可以避免开发人员因为漏删或者误删造成的生产问题，比如将遗
漏的日志代码发布至生产环境，而泄露相关敏感信息，造成信息泄露的安全问题或者多删除了相关业务代码造成生产问题等。
60.需要说明的是，上述各个实施例所述的前端代码调试方法，可以根据需要将不同实施例中包含的技术特征重新进行组合，以获取组合后的实施方案，但都在本申请要求的保护范围之内。
61.请参阅图7，图7为本申请实施例提供的前端代码调试装置的一个示意性框图。对应于上述所述前端代码调试方法，本申请实施例还提供一种前端代码调试装置。如图7所示，该前端代码调试装置包括用于执行上述所述前端代码调试方法的单元，该前端代码调试装置可以被配置于计算机设备中。具体地，请参阅图7，该前端代码调试装置70包括接收单元71、第一获取单元72、调取单元73及调试单元74。
62.其中，接收单元71，用于启动进行代码调试所对应的预设编辑器插件，并基于所述预设编辑器插件，接收用户输入待进行调试的前端代码所包含的预设字段；
63.第一获取单元72，用于响应于对所述预设字段进行调试的启动调试指令，获取所述预设字段；
64.调取单元73，用于根据所述预设字段，调取所述预设字段相对应的预设调试模板；
65.调试单元74，用于根据所述预设调试模板，将所述预设字段嵌入所述预设调试模板，以得到目标调试代码，并对所述目标调试代码进行调试，以实现对所述前端代码进行调试。
66.在一实施例中，所述第一获取单元72包括：
67.第一监测子单元，用于监测所述启动调试指令所对应的预设调试快捷键；
68.第一执行子单元，用于若监测到所述预设调试快捷键被触发，执行所述响应于对所述预设字段进行调试的启动调试指令的步骤。
69.在一实施例中，所述调试单元74包括：
70.第一触发子单元，用于根据所述预设调试模板，触发预设插入方法；
71.第一获取子单元，用于获取所述预设字段及所述预设字段在所述预设调试模板中所对应的目标位置；
72.插入子单元，用于将所述预设字段插入所述预设目标位置，以得到目标调试代码。
73.在一实施例中，所述所述调试单元74还包括：
74.第一判断子单元，用于判断所述预设字段是否为单个字段；
75.第二执行子单元，用于若所述预设字段为单个字段，执行所述根据所述预设调试模板，触发预设插入方法的步骤；
76.第三执行子单元，用于若所述预设字段为多个字段，迭代执行所述根据所述预设调试模板，触发预设插入方法的步骤，直至对每个所述预设字段均生成了各自所对应的目标调试代码。
77.在一实施例中，所述调试单元74，用于根据所述预设字段的调试结果所对应的预设样式参数，将所述预设字段所对应的调试结果进行日志打印。
78.在一实施例中，所述调试单元74包括：
79.第二获取子单元，用于获取所述预设编辑器插件中所包含的所述预设字段的调试结果所对应的预设日志背景色、预设字体及预设字体颜色；
80.打印子单元，用于根据所述预设日志背景色、所述预设字体及所述预设字体颜色，将所述预设字段所对应的调试结果进行日志打印。
81.在一实施例中，所述前端代码调试装置70还包括：
82.监测单元，用于监测删除日志代码所对应的预设删除快捷键；
83.删除单元，用于若监测到所述预设删除快捷键被触发，通过预设筛选方式获取所述预设字段所对应生成的日志代码，并将所述日志代码进行删除
84.需要说明的是，所属领域的技术人员可以清楚地了解到，上述前端代码调试装置和各单元的具体实现过程，可以参考前述方法实施例中的相应描述，为了描述的方便和简洁，在此不再赘述。
85.同时，上述前端代码调试装置中各个单元的划分和连接方式仅用于举例说明，在其他实施例中，可将前端代码调试装置按照需要划分为不同的单元，也可将前端代码调试装置中各单元采取不同的连接顺序和方式，以完成上述前端代码调试装置的全部或部分功能。
86.上述前端代码调试装置可以实现为一种计算机程序的形式，该计算机程序可以在如图8所示的计算机设备上运行。
87.请参阅图8，图8是本申请实施例提供的一种计算机设备的示意性框图。该计算机设备500可以是台式机电脑或者服务器等计算机设备，也可以是其他设备中的组件或者部件。
88.参阅图8，该计算机设备500包括通过系统总线501连接的处理器502、存储器和网络接口505，其中，存储器可以包括非易失性存储介质503和内存储器504，所述存储器也可以为易失性存储介质。
89.该非易失性存储介质503可存储操作系统5031和计算机程序5032。该计算机程序5032被执行时，可使得处理器502执行一种上述前端代码调试方法。
90.该处理器502用于提供计算和控制能力，以支撑整个计算机设备500的运行。
91.该内存储器504为非易失性存储介质503中的计算机程序5032的运行提供环境，该计算机程序5032被处理器502执行时，可使得处理器502执行一种上述前端代码调试方法。
92.该网络接口505用于与其它设备进行网络通信。本领域技术人员可以理解，图8中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备500的限定，具体的计算机设备500可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。例如，在一些实施例中，计算机设备可以仅包括存储器及处理器，在这样的实施例中，存储器及处理器的结构及功能与图8所示实施例一致，在此不再赘述。
93.其中，所述处理器502用于运行存储在存储器中的计算机程序5032，以实现如下步骤：启动进行代码调试所对应的预设编辑器插件，并基于所述预设编辑器插件，接收用户输入待进行调试的前端代码所包含的预设字段；响应于对所述预设字段进行调试的启动调试指令，获取所述预设字段；根据所述预设字段，调取所述预设字段相对应的预设调试模板；根据所述预设调试模板，将所述预设字段嵌入所述预设调试模板，以得到目标调试代码，并对所述目标调试代码进行调试，以实现对所述前端代码进行调试。
94.在一实施例中，所述处理器502在实现所述响应于对所述预设字段进行调试的启
动调试指令的步骤时，具体实现以下步骤：
95.监测所述启动调试指令所对应的预设调试快捷键；
96.若监测到所述预设调试快捷键被触发，执行所述响应于对所述预设字段进行调试的启动调试指令的步骤。
97.在一实施例中，所述处理器502在实现所述根据所述预设调试模板，将所述预设字段嵌入所述预设调试模板，以得到目标调试代码的步骤时，具体实现以下步骤：
98.根据所述预设调试模板，触发预设插入方法；
99.获取所述预设字段及所述预设字段在所述预设调试模板中所对应的目标位置；
100.将所述预设字段插入所述预设目标位置，以得到目标调试代码。
101.在一实施例中，所述处理器502在实现所述根据所述预设调试模板，触发预设插入方法的步骤之前，还实现以下步骤：
102.判断所述预设字段是否为单个字段；
103.若所述预设字段为单个字段，执行所述根据所述预设调试模板，触发预设插入方法的步骤；
104.若所述预设字段为多个字段，迭代执行所述根据所述预设调试模板，触发预设插入方法的步骤，直至对每个所述预设字段均生成了各自所对应的目标调试代码。
105.在一实施例中，所述处理器502在实现所述对所述目标调试代码进行调试的步骤时，具体实现以下步骤：
106.根据所述预设字段的调试结果所对应的预设样式参数，将所述预设字段所对应的调试结果进行日志打印。
107.在一实施例中，所述处理器502在实现所述根据所述预设字段的调试结果所对应的预设样式参数，将所述预设字段所对应的调试结果进行日志打印的步骤时，具体实现以下步骤：
108.获取所述预设编辑器插件中所包含的所述预设字段的调试结果所对应的预设日志背景色、预设字体及预设字体颜色；
109.根据所述预设日志背景色、所述预设字体及所述预设字体颜色，将所述预设字段所对应的调试结果进行日志打印。
110.在一实施例中，所述处理器502在实现所述根据所述预设调试模板，将所述预设字段嵌入所述预设调试模板，以得到目标调试代码，并对所述目标调试代码进行调试，以实现对所述前端代码进行调试的步骤之后，还实现以下步骤：
111.监测删除日志代码所对应的预设删除快捷键；
112.若监测到所述预设删除快捷键被触发，通过预设筛选方式获取所述预设字段所对应生成的日志代码，并将所述日志代码进行删除。
113.应当理解，在本申请实施例中，处理器502可以是中央处理单元(central processingunit，cpu)，该处理器502还可以是其他通用处理器、数字信号处理器(digital signal processor，dsp)、专用集成电路(application specific integrated circuit，asic)、现成可编程门阵列(field
‑
programmable gatearray，fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。其中，通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
114.本领域普通技术人员可以理解的是实现上述实施例的方法中的全部或部分流程，是可以通过计算机程序来完成，该计算机程序可存储于一计算机可读存储介质。该计算机程序被该计算机系统中的至少一个处理器执行，以实现上述方法的实施例的流程步骤。
115.因此，本申请还提供一种计算机可读存储介质。该计算机可读存储介质可以为非易失性的计算机可读存储介质，也可以为易失性的计算机可读存储介质，该计算机可读存储介质存储有计算机程序，该计算机程序被处理器执行时使处理器执行如下步骤：
116.一种计算机程序产品，当其在计算机上运行时，使得计算机执行以上各实施例中所描述的所述前端代码调试方法的步骤。
117.所述计算机可读存储介质可以是前述设备的内部存储单元，例如设备的硬盘或内存。所述计算机可读存储介质也可以是所述设备的外部存储设备，例如所述设备上配备的插接式硬盘，智能存储卡(smart media card,smc)，安全数字(secure digital,sd)卡，闪存卡(flash card)等。进一步地，所述计算机可读存储介质还可以既包括所述设备的内部存储单元也包括外部存储设备。
118.所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，上述描述的设备、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
119.所述存储介质为实体的、非瞬时性的存储介质，例如可以是u盘、移动硬盘、只读存储器(read
‑
onlymemory，rom)、磁碟或者光盘等各种可以存储计算机程序的实体存储介质。
120.本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。
121.在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的。例如，各个单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。
122.本申请实施例方法中的步骤可以根据实际需要进行顺序调整、合并和删减。本申请实施例装置中的单元可以根据实际需要进行合并、划分和删减。另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以是两个或两个以上单元集成在一个单元中。
123.该集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分，或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台电子设备(可以是个人计算机，终端，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。
124.以上所述，仅为本申请的具体实施方式，但本申请明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到各种等效的修改或替换，这些修改或替换都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以权
利要求的保护范围为准。