CN110389755B - 代码处理方法及装置、电子设备和计算机可读存储介质 - Google Patents

Abstract

本公开是关于一种代码处理方法及装置、电子设备以及计算机可读存储介质，涉及前端开发技术领域，可以应用于开发者通过开发者工具调试代码的同时能够实时更新保存代码的场景。该代码处理方法包括：确定源代码，并生成与源代码对应的目标项目代码；确定配置文件；其中，配置文件包含源代码与目标项目代码之间的对应关系；响应于调试操作，调试目标项目代码并确定修改内容；响应于修改操作，根据配置文件将修改内容同步至源代码。本公开可以使开发者在开发工具中调试目标项目代码的同时，将目标项目代码中的修改内容同步至源代码中。

Description

代码处理方法及装置、电子设备和计算机可读存储介质

技术领域

本公开涉及前端开发技术领域，具体而言，涉及一种代码处理方法、代码处理装置、电子设备以及计算机可读存储介质。

背景技术

在前端开发中，开发者通常在浏览器提供的开发者工具中对页面样式进行调试，以便通过浏览器实时查看调试效果。层叠样式表(Cascading Style Sheets，CSS)可以用于对网页对象和模型样式进行编辑。

开发者在调试页面元素的样式时，可以先选择出页面元素并显示出该元素的CSS样式，进而可以直接在该CSS样式上进行调试，以达到更改页面元素显示样式的目的。

然而，通过浏览器的开发者工具只能实时调试页面样式，代码调试完之后还需要开发者手动复制调试后的CSS样式，并粘贴到项目中保存。

需要说明的是，在上述背景技术部分公开的信息仅用于加强对本公开的背景的理解，因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。

发明内容

本公开的目的在于提供一种代码处理方法、代码处理装置、电子设备以及计算机可读存储介质，进而至少在一定程度上克服在浏览器中调试代码后，仍需要手动将调试后的代码复制粘贴到源代码中而造成操作繁琐的问题。

本公开的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本发明的实践而习得。

根据本公开的第一方面，提供一种代码处理方法，包括：确定源代码，并生成与源代码对应的目标项目代码；确定配置文件；其中，配置文件包含源代码与目标项目代码之间的对应关系；响应于调试操作，调试目标项目代码并确定修改内容；响应于修改操作，根据配置文件将修改内容同步至源代码。

可选的，生成与源代码对应的目标项目代码，包括：创建与源代码对应的代码项目；其中，代码项目用于打包源代码；通过代码项目对源代码进行打包操作后生成目标项目代码。

可选的，确定配置文件，包括：确定源代码与目标项目代码之间的结构对应信息作为配置文件。

可选的，在确定配置文件之后，上述方法还包括：对配置文件进行解码处理以生成中间信息文件；根据中间信息文件确定源代码的结构信息以及目标项目代码的结构信息。

可选的，在响应于调试操作，调试目标项目代码并确定修改内容之前，上述方法还包括：创建源代码与目标项目代码之间的通信服务。

可选的，响应于调试操作，调试目标项目代码并确定修改内容，包括：响应于调试操作，获取与调试操作对应的目标项目代码的变化结构信息；将变化结构信息作为修改内容。

可选的，响应于修改操作，根据配置文件将修改内容同步至源代码，包括：响应于修改操作，获取源代码与目标项目代码之间的通信服务；通过通信服务并根据配置文件与修改内容更新源代码的结构信息；根据更新后的源代码的结构信息更新并保存源代码。

根据本公开的第二方面，提供一种代码处理装置，包括：代码生成模块，用于确定源代码，并生成与源代码对应的目标项目代码；配置文件确定模块，用于确定配置文件；其中，配置文件包含源代码与目标项目代码之间的对应关系；修改内容确定模块，用于响应于调试操作，调试目标项目代码并确定修改内容；内容同步模块，用于响应于修改操作，根据配置文件将修改内容同步至源代码。

可选的，代码生成模块包括代码生成单元，用于创建与源代码对应的代码项目；其中，代码项目用于打包源代码；通过代码项目对源代码进行打包操作后生成目标项目代码。

可选的，配置文件确定模块包括配置文件确定单元，用于确定源代码与目标项目代码之间的结构对应信息作为配置文件。

可选的，配置文件确定模块还包括结构信息确定单元，用于对配置文件进行解码处理以生成中间信息文件；根据中间信息文件确定源代码的结构信息以及目标项目代码的结构信息。

可选的，代码处理装置还包括通信服务创建模块，用于创建源代码与目标项目代码之间的通信服务。

可选的，修改内容确定模块包括修改内容确定单元，用于响应于调试操作，调试目标项目代码并确定修改内容，包括：响应于调试操作，获取与调试操作对应的目标项目代码的变化结构信息；将变化结构信息作为修改内容。

可选的，内容同步模块包括内容同步单元，用于响应于修改操作，获取源代码与目标项目代码之间的通信服务；通过通信服务并根据配置文件与修改内容更新源代码的结构信息；根据更新后的源代码的结构信息更新并保存源代码。

根据本公开的第三方面，提供一种电子设备，包括：处理器；以及存储器，所述存储器上存储有计算机可读指令，所述计算机可读指令被所述处理器执行时实现根据上述任意一项所述的代码处理方法。

根据本公开的第四方面，提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现根据上述任意一项所述的代码处理方法。

本公开提供的技术方案可以包括以下有益效果：

本公开的示例性实施例中的代码处理方法，首先，确定源代码，并生成与源代码对应的目标项目代码；其次，确定配置文件；其中，配置文件包含源代码与目标项目代码之间的对应关系；再次，响应于调试操作，调试目标项目代码并确定修改内容；接下来，响应于修改操作，根据配置文件将修改内容同步至源代码。通过本公开的代码处理方法，一方面，确定出源代码后，可以生成与源代码对应的目标项目代码，并确定出包含源代码与目标项目代码之间的对应关系的配置文件，以便在对目标项目代码进行调试操作后，可以根据配置文件中的对应关系对源代码进行修改。另一方面，响应于调试操作，可以对目标项目代码进行调试，可以确定出对目标项目代码进行调试操作的过程中产生的修改内容。再一方面，根据配置文件可以将修改内容同步至源代码，无需开发者在浏览器中进行代码调试操作后，再手动将调试后的代码复制粘贴到源代码中进行保存。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：

图1示意性示出了根据本公开的示例性实施方式的代码处理方法的流程图；

图2示意性示出了根据本公开的示例性实施方式的开发者调试并实时保存代码的流程图；

图3示意性示出了根据本公开的示例性实施方式的代码处理装置的第一方框图；

图4示意性示出了根据本公开的示例性实施方式的代码生成模块的方框图；

图5示意性示出了根据本公开的示例性实施方式的配置文件确定模块的第一方框图；

图6示意性示出了根据本公开的示例性实施方式的配置文件确定模块的第二方框图；

图7示意性示出了根据本公开的示例性实施方式的代码处理装置的第二方框图；

图8示意性示出了根据本公开的示例性实施方式的修改内容确定模块的方框图；

图9示意性示出了根据本公开的示例性实施方式的内容同步模块的方框图；

图10示意性示出了根据本公开一示例性实施例的电子设备的框图；

图11示意性示出了根据本公开一示例性实施例的计算机可读存储介质的示意图。

具体实施方式

现在将参考附图更全面地描述示例实施例。然而，示例实施例能够以多种形式实施，且不应被理解为限于在此阐述的实施例；相反，提供这些实施例使得本公开将全面和完整，并将示例实施例的构思全面地传达给本领域的技术人员。在图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。

此外，所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施例中。在下面的描述中，提供许多具体细节从而给出对本公开的实施例的充分理解。然而，本领域技术人员将意识到，可以实践本公开的技术方案而没有所述特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知结构、方法、装置、实现、材料或者操作以避免模糊本公开的各方面。

附图中所示的方框图仅仅是功能实体，不一定必须与物理上独立的实体相对应。即，可以采用软件形式来实现这些功能实体，或在一个或多个软件硬化的模块中实现这些功能实体或功能实体的一部分，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

在前端开发中，开发者采用浏览器提供的开发者工具中对前端页面中页面元素的CSS样式进行调试，并通过浏览器实时查看调试效果。开发者可以先选择出页面元素并显示出该元素的CSS样式，并直接在该CSS样式上进行调试。然而，通过浏览器的开发者工具只能实时调试页面样式，代码调试完之后还需要开发者手动复制调试后的CSS样式，并粘贴到项目中保存，这样的操作比较繁琐，而且影响开发效率。

基于此，在本示例实施例中，首先提供了一种代码处理方法，可以利用服务器来实现本公开的用代码处理方法，也可以利用终端设备来实现本公开所述的方法，其中，所述终端设备可以包括诸如手机、平板电脑、笔记本电脑、掌上电脑、个人数字助理(PersonalDigital Assistant，PDA)等移动终端，以及诸如台式计算机等固定终端。图1示意性示出了根据本公开的一些实施例的代码处理方法流程的示意图。参考图1，该代码处理方法可以包括以下步骤：

步骤S110，确定源代码，并生成与源代码对应的目标项目代码。

步骤S120，确定配置文件；其中，配置文件包含源代码与目标项目代码之间的对应关系。

步骤S130，响应于调试操作，调试目标项目代码并确定修改内容。

步骤S140，响应于修改操作，根据配置文件将修改内容同步至源代码。

根据本示例实施例中的代码处理方法，一方面，确定出源代码后，可以生成与源代码对应的目标项目代码，并确定出包含源代码与目标项目代码之间的对应关系的配置文件，以便在对目标项目代码进行调试操作后，可以根据配置文件中的对应关系对源代码进行修改。另一方面，响应于调试操作，可以对目标项目代码进行调试，可以确定出对目标项目代码进行调试操作的过程中产生的修改内容。再一方面，根据配置文件可以将修改内容同步至源代码，无需开发者在浏览器中进行代码调试操作后，再手动将调试后的代码复制粘贴到源代码中进行保存。

下面，将对本示例实施例中的代码处理方法进行进一步的说明。

在步骤S110中，确定源代码，并生成与源代码对应的目标项目代码。

在本公开的一些示例性实施方式中，源代码可以是程序开发者(简称：开发者)所开发的软件代码的源码，例如源代码可以是开发者通过浏览器提供的开发者工具进行调试的代码。通常开发者在进行软件开发时，可以针对不同的软件程序创建一个对应的项目，目标项目代码可以是与源代码对应的处于代码项目中的代码。

确定出源代码后，可以创建一个与源代码对应的代码项目，并基于代码项目生成与源代码对应的目标项目代码。

根据本公开的一些示例性实施例，创建与源代码对应的代码项目；其中，代码项目用于打包源代码；通过代码项目对源代码进行打包操作后生成目标项目代码。代码项目可以是开发者创建的用于开发源代码的软件项目。创建出与源代码对应的代码项目后，可以对源代码进行打包操作，生成对应的目标项目代码。通过该代码项目，软件开发者可以对项目中的代码进行更改操作、对软件的开发流程进行控制等，使得整个软件开发过程更加高效、使得整个开发过程具有更好的可控性。

举例而言，在开发前端软件项目时，软件开发者可以采用前端资源打包工具webpack创建一个对应的前端代码项目。目前，开发者通常基于前端框架进行代码开发，其中，前端框架可以包括但不限于React、Vue、Bootstrap、Angular和jQuery UI等。例如，可以采用vue-cli命令构建一个基于vue框架的前端代码项目。

在步骤S120中，确定配置文件；其中，配置文件包含源代码与目标项目代码之间的对应关系。

在本公开的一些示例性实施方式中，配置文件可以是与源代码以及目标项目代码对应的文件，配置文件中包含源代码与目标项目代码之间的对应关系，根据配置文件中包含的源代码与目标项目代码之间的对应关系，在对目标项目代码进行调试操作后，可以确定出发生更改的目标项目代码对应的源代码。举例而言，配置文件的确定方式可以为：通过webpack工具配置源代码的css-loader文件、style-loader文件和sourcemap文件等。具体的，css-loader文件可以用于加载代码中的CSS文件；style-loader文件可以采用<style>命令将css-loader的内部样式注入到超文本标记语言(Hyper Text Markup Language，HTML)页面；sourcemap文件可以是一种保存源代码信息的信息文件。

采用webpack工具或其他代码打包工具对源代码进行打包转换后，sourcemap文件中存储着源代码的位置信息以及经打包处理后转换的目标项目代码的位置信息。由于现有的前端项目都是使用一些构建工具进行开发的，可以对源代码进行打包操作，对源代码打包处理后，源代码的代码位置或其他信息将会发生改变，因此，必须对sourcemap文件进行配置。

配置文件可以反映目标项目代码的代码位置信息。配置文件，例如sourcemap文件可以包括但不限于源代码的行列位置信息、打包转换后的目标项目代码的行列位置信息以及所属文件的信息。

开发者对目标项目代码添加配置文件后，可以根据配置文件确定出源代码以及目标项目代码的结构信息，当结构信息发生变化后，可以根据变化后的结构信息对源代码进行更改。

举例而言，采用谷歌浏览器进行程序开发时，开发者可以采用谷歌浏览器开发者工具扩展(Chrome DevTools Extension)提供的接口方法获取页面引入的CSS文件，该CSS文件中包含sourcemap信息数据，通过分析该sourcemap数据可以获取到该页面的CSS数据。

根据本公开的一些示例性实施例，确定源代码与目标项目代码之间的结构对应信息作为配置文件。结构对应信息可以是源代码的结构对应信息与目标项目代码的结构对应信息以及两种位置信息之间的对应关系。配置文件中可以包括但不限于源代码的样式信息、目标项目代码的样式信息、源代码的代码位置信息、目标项目代码的代码位置信息、源代码与目标项目代码对应的代码结构信息等。例如，可以通过sourcemap文件确定源代码与目标项目代码之间的结构对应信息。

根据本公开的另一示例性实施例，对配置文件进行解码处理以生成中间信息文件；根据中间信息文件确定源代码的结构信息以及目标项目代码的结构信息。

举例而言，配置文件中的sourcemap信息可以通过base64编码方式进行转码处理，将sourcemap信息进行解码处理后，将解码后的信息进行转换成抽象语法树(AbstractSyntax Tree，AST)，简称语法树，其中，抽象语法树可以是对源代码语法结构的一种抽象表示，它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。因此，可以通过抽象语法树表示源代码的结构信息。

将sourcemap信息进行转码处理后，主要获取转码后的sourcemap信息中的sources信息和mappings信息。具体的，sources信息中记录了该CSS文件所在的文件位置；mappings信息中记录了源代码以及转换后的目标项目代码的位置信息，使得源代码与目标项目代码中的每一行代码都可以相互对应，mappings信息是较为重要的信息。

进一步地，mappings信息是通过一种采用任意位数的二进制来表示一个任意大的数字的编码方式(Variable-length quantity，VLQ)进行编码的，因此，需要采用对应的解码方法对mappings信息进行解码处理，以获取其中的信息。

根据本公开的又一示例性实施例，创建源代码与目标项目代码之间的通信服务。在确定出源代码与目标项目代码后，可以创建源代码与目标项目代码之间的通信服务。由于目标项目代码一般创建在浏览器中，而源代码一般存储在本地的代码项目中，因此，可以建立本地与浏览器之间的通信连接。具体的，本地是指源代码所处的代码项目所在的终端设备或服务器。

举例而言，在node.js平台上进行软件开发时，可以在本地搭建一个node.js的WebSocket服务，该WebSocket服务可以用于接收页面发送的信息。

在步骤S130中，响应于调试操作，调试目标项目代码并确定修改内容。

在本公开的一些示例性实施方式中，调试操作可以是开发者在软件开发过程中根据开发需求对目标项目代码进行调试的过程，该调试操作可以包括但不限于通过浏览器提供的开发者工具对目标项目代码的更改操作。修改内容可以是经过针对目标项目代码的调试操作后，目标项目代码的样式信息、位置信息等发生改变后所对应的内容。

举例而言，开发者在谷歌浏览器中调试目标项目代码时，可以利用谷歌浏览器开发者工具扩展在开发者工具Elements面板上创建一个自定义的侧边栏，通过该侧边栏对页面代码进行调试操作。

当接收到开发者针对目标项目代码的调试操作时，页面对应的代码将相应发生变化，页面可以通过通信服务向本地服务发送通知，通知本地服务产生了修改内容，以便后续过程中本地根据修改内容对源代码进行修改。

根据本公开的一些示例性实施例，响应于调试操作，获取与调试操作对应的目标项目代码的变化结构信息；将变化结构信息作为修改内容。变化结构信息可以是经过调试操作后，目标项目代码的位置结构、表现样式等内容发生改变后对应形成的信息。

举例而言，在前端开发中，开发者通过开发者工具Elements面板中styles侧边栏进行代码调试时，即开发者选中页面中某一个文档对象模型(Document Object Model，DOM)节点的时候显示该节点对应的style样式，并可以在此基础上对节点样式进行调试或修改等。

当开发者在自定义的面板或者styles侧边栏中对目标项目代码的样式进行修改后，该面板会通过抽象语法树获取修改的这行CSS样式的信息，即变化结构信息，并将变化结构信息作为修改内容。此外，浏览器还可以将变化结构信息通知给本地的服务，本地服务接收到变化结构信息后可以根据修改内容对源代码进行与目标项目代码同步的修改。

本领域技术人员容易理解的是，在本公开的其它示例性实施例中，开发者可以通过不同的浏览器进行代码调试，如：火狐浏览器，其他的浏览器开发者扩展工具的对应名称可能会有所不同，本公开对此不作任何特殊限定。

在步骤S140中，响应于修改操作，根据配置文件将修改内容同步至源代码。

在本公开的一些示例性实施方式中，本地服务接收到修改内容后，将获取修改内容中包含的抽象语法树信息，该信息中可以包括但不限于目标项目代码的文件位置以及发生变化的CSS代码在该文件的第几行第几列，以便通过修改对源代码进行更新和保存。

根据本公开的一些示例性实施例，响应于修改操作，获取源代码与目标项目代码之间的通信服务；通过通信服务并根据配置文件与修改内容更新源代码的结构信息；根据更新后的源代码的结构信息更新并保存源代码。在接收到修改操作后，可以获取预先创建的源代码和目标项目代码之间的通信服务，例如，可以创建一个本地服务与浏览器之间的WebSocket服务，或者创建一个用于通信的接口，用于本地项目与浏览器之间的通信。具体的，WebSocket服务是一种长连接服务，WebSocket服务搭建完成后，可以随时接收本地项目与浏览器之间的通信请求，使两者之间可以正常通信。

举例而言，当开发者进行代码调试后，产生了变化结构信息，这些变化结构信息对应形成修改内容，可以通过WebSocket通信服务将修改内容通知给本地服务，本地服务接收到修改内容后，可以结合配置文件中的文件信息以及修改内容对源代码的结构信息、样式信息等进行更新，对源代码更新完成后可以对源代码进行保存操作，实现了在浏览器中调试代码的同时，自动更改和保存本地项目中存储的源代码的目的。

参考图2，图2示意性示出了开发者调试代码并实时保存代码的流程图。在步骤S210中，开发者可以为源代码对应的目标项目代码添加配置文件，主要是一些sourcemap文件。配置文件添加完成后，在步骤S220中，将创建浏览器与本地之间的WebSocket通信服务，以便浏览器与本地之间进行通信，WebSocket通信服务能够接收到来自浏览器页面的页面请求；在步骤S230中，当开发者通过浏览器提供的开发者扩展工具进行代码调试时，WebSocket通信服务将把代码调试过程中对应的变化结构信息传输到本地服务，本地服务接收到这些变化结构信息将会对配置文件进行修改更新，以便通过这些配置文件实现更新和保存源代码的功能。

综上所述，首先，确定源代码，并生成与源代码对应的目标项目代码；其次，确定配置文件；其中，配置文件包含源代码与目标项目代码之间的对应关系；再次，响应于调试操作，调试目标项目代码并确定修改内容；接下来，响应于修改操作，根据配置文件将修改内容同步至源代码。通过本公开的代码处理方法，一方面，确定出源代码和目标项目代码后，可以对目标项目代码添加对应的配置文件，该配置文件中包含了源代码与目标项目代码之间对应关系的信息，以便后续根据该配置文件更新源代码。另一方面，搭建浏览器与本地项目之间的通信服务，当页面接收到开发者对应的代码调试操作后生成对应的页面请求，该页面请求中包含了目标项目代码的变化结构信息，通过该通信服务可以将该页面请求发送到本地，并将变化结构信息作为修改内容，通知本地服务将可以根据修改内容更新源代码。再一方面，通过本地与浏览器之间的通信服务，可以使开发者在浏览器中调试代码的同时，对源代码进行同步的更新，而无需开发者手动从浏览器中复制源代码并粘贴到本地的代码项目中，省去了一些不必要的步骤，有效地提高了代码开发效率。

需要说明的是，尽管在附图中以特定顺序描述了本发明中方法的各个步骤，但是，这并非要求或者暗示必须按照该特定顺序来执行这些步骤，或是必须执行全部所示的步骤才能实现期望的结果。附加的或备选的，可以省略某些步骤，将多个步骤合并为一个步骤执行，以及/或者将一个步骤分解为多个步骤执行等。

此外，在本示例实施例中，还提供了一种代码处理装置。参考图3，该代码处理装置300可以包括：代码生成模块310、配置文件确定模块320、修改内容确定模块330以及内容同步模块340。

具体的，代码生成模块310可以用于确定源代码，并生成与源代码对应的目标项目代码；配置文件确定模块320可以用于确定配置文件；其中，配置文件包含源代码与目标项目代码之间的对应关系；修改内容确定模块330可以用于响应于调试操作，调试目标项目代码并确定修改内容；内容同步模块340可以用于响应于修改操作，根据配置文件将修改内容同步至源代码。

代码处理装置300可以确定出与源代码对应的目标项目代码，并为目标项目代码添加包括源代码与目标项目代码之间对应关系的配置文件，当开发者通过浏览器开发者扩展工具或者其他工具对目标项目代码进行调试操作时，可以确定出与调试操作对应的修改内容，响应于修改操作，可以根据配置文件将修改内容同步更新到源代码中，实现在浏览器调试目标项目代码的同时，同步更新并实时保存源代码的目的，是一种行之有效的代码处理装置。

根据本公开的一些示例性实施例，参考图4，代码生成模块310可以包括代码生成单元410。

具体的，代码生成单元410可以用于创建与源代码对应的代码项目；其中，代码项目用于打包源代码；通过代码项目对源代码进行打包操作后生成目标项目代码。

代码生成单元410可以在本地创建一个与源代码对应的代码项目，该代码项目用于打包源代码，并将打包后的源代码作为目标项目代码，以便开发者对代码项目中的目标项目代码进行处理后，生成对应的软件安装包等文件。

根据本公开的另一示例性实施例，参考图5，配置文件确定模块320可以包括配置文件确定单元510。

具体的，配置文件确定单元510可以用于确定源代码与目标项目代码之间的结构对应信息作为配置文件。

配置文件确定单元510可以将源代码与目标项目代码之间对应的结构对应信息作为配置文件，以便后续对目标项目代码进行调试后，根据配置文件对源代码进行修改。

根据本公开的又一示例性实施例，参考图6，配置文件确定模块610还可以包括结构信息确定单元620。

具体的，结构信息确定单元620可以用于对配置文件进行解码处理以生成中间信息文件；根据中间信息文件确定源代码的结构信息以及目标项目代码的结构信息。

结构信息确定单元620可以对配置文件进行解码处理后生成中间信息文件，中间信息文件包括了源代码的结构信息以及目标项目代码的结构信息。

在本公开的另一示例性实施方式中，还提供了另一代码处理装置，参考图7，该代码处理装置700还可以包括通信服务创建模块710。

具体的，通信服务创建模块710可以用于创建源代码与目标项目代码之间的通信服务。

通信服务创建模块710可以建立浏览器中的源代码与创建的目标项目代码之间的通信服务，以便通过该通信服务将修改的目标项目代码的信息通知到本地，进行源代码更新。

根据本公开的一些示例性实施例，参考图8，修改内容确定模块330可以包括修改内容确定单元810。

具体的，修改内容确定单元810可以用于响应于调试操作，获取与调试操作对应的目标项目代码的变化结构信息；将变化结构信息作为修改内容。

修改内容确定单元810可以响应于针对目标项目代码的调试操作，并确定出与调试操作对应的目标项目代码的变化结构信息，可以将变化结构信息作为修改内容，以便后续根据修改内容对源代码进行更新。

根据本公开的另一示例性实施例，参考图9，内容同步模块340可以包括内容同步单元910。

具体的，内容同步单元910可以用于响应于修改操作，获取源代码与目标项目代码之间的通信服务；通过通信服务并根据配置文件与修改内容更新源代码的结构信息；根据更新后的源代码的结构信息更新并保存源代码。

内容同步单元910可以通过源代码与目标项目代码之间的通信服务，根据修改内容更新源代码的结构信息，以根据更新后的源代码的结构信息完成对源代码的更新操作，实现了在浏览器中调试代码的同时能够实时更新并保存对应的源代码的效果。

上述中各虚拟代码处理装置模块的具体细节已经在对应的代码处理方法中进行了详细的描述，因此此处不再赘述。

应当注意，尽管在上文详细描述中提及了代码处理装置的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本公开的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。

此外，在本公开的示例性实施例中，还提供了一种能够实现上述方法的电子设备。

所属技术领域的技术人员能够理解，本发明的各个方面可以实现为系统、方法或程序产品。因此，本发明的各个方面可以具体实现为以下形式，即：完全的硬件实施例、完全的软件实施例(包括固件、微代码等)，或硬件和软件方面结合的实施例，这里可以统称为“电路”、“模块”或“系统”。

下面参照图10来描述根据本发明的这种实施例的电子设备1000。图10显示的电子设备1000仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图10所示，电子设备1000以通用计算设备的形式表现。电子设备1000的组件可以包括但不限于：上述至少一个处理单元1010、上述至少一个存储单元1020、连接不同系统组件(包括存储单元1020和处理单元1010)的总线1030、显示单元1040。

其中，所述存储单元存储有程序代码，所述程序代码可以被所述处理单元1010执行，使得所述处理单元1010执行本说明书上述“示例性方法”部分中描述的根据本发明各种示例性实施例的步骤。

存储单元1020可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)1021和/或高速缓存存储单元1022，还可以进一步包括只读存储单元(ROM)1023。

存储单元1020还可以包括具有一组(至少一个)程序模块1025的程序/实用工具1024，这样的程序模块1025包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

总线1030可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。

电子设备1000也可以与一个或多个外部设备1070(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与该电子设备1000交互的设备通信，和/或与使得该电子设备1000能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口1050进行。并且，电子设备1000还可以通过网络适配器1060与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器1060通过总线1030与电子设备1000的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备1000使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

通过以上的实施例的描述，本领域的技术人员易于理解，这里描述的示例实施例可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施例的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、终端装置、或者网络设备等)执行根据本公开实施例的方法。

在本公开的示例性实施例中，还提供了一种计算机可读存储介质，其上存储有能够实现本说明书上述方法的程序产品。在一些可能的实施例中，本发明的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在终端设备上运行时，所述程序代码用于使所述终端设备执行本说明书上述“示例性方法”部分中描述的根据本发明各种示例性实施例的步骤。

参考图11所示，描述了根据本发明的实施例的用于实现上述方法的程序产品1100，其可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在终端设备，例如个人电脑上运行。然而，本发明的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

所述程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读信号介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

此外，上述附图仅是根据本发明示例性实施例的方法所包括的处理的示意性说明，而不是限制目的。易于理解，上述附图所示的处理并不表明或限制这些处理的时间顺序。另外，也易于理解，这些处理可以是例如在多个模块中同步或异步执行的。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其他实施例。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限。

Claims (9)

1.一种代码处理方法，其特征在于，包括：

确定源代码，并生成与所述源代码对应的目标项目代码；

确定配置文件；其中，所述配置文件包含所述源代码与所述目标项目代码之间的对应关系，所述对应关系包括所述源代码与所述目标项目代码之间的结构对应信息；

响应于调试操作，调试所述目标项目代码并确定修改内容；

响应于修改操作，根据所述配置文件将所述修改内容同步至所述源代码；

所述响应于调试操作，调试所述目标项目代码并确定所述修改内容，包括：响应于所述调试操作，获取与所述调试操作对应的所述目标项目代码的变化结构信息；将所述变化结构信息作为所述修改内容。

2.根据权利要求1所述的代码处理方法，其特征在于，所述生成与所述源代码对应的目标项目代码，包括：

创建与所述源代码对应的代码项目；其中，所述代码项目用于打包所述源代码；

通过所述代码项目对所述源代码进行打包操作后生成所述目标项目代码。

3.根据权利要求1所述的代码处理方法，其特征在于，所述确定配置文件，包括：

确定所述源代码与所述目标项目代码之间的结构对应信息作为所述配置文件。

4.根据权利要求1或3任意一项所述的代码处理方法，其特征在于，在所述确定配置文件之后，所述方法还包括：

对所述配置文件进行解码处理以生成中间信息文件；

根据所述中间信息文件确定所述源代码的结构信息以及所述目标项目代码的结构信息。

5.根据权利要求1所述的代码处理方法，其特征在于，在所述响应于调试操作，调试所述目标项目代码并确定修改内容之前，所述方法还包括：

创建所述源代码与所述目标项目代码之间的通信服务。

6.根据权利要求1所述的代码处理方法，其特征在于，所述响应于修改操作，根据所述配置文件将所述修改内容同步至所述源代码，包括：

响应于所述修改操作，获取所述源代码与所述目标项目代码之间的通信服务；

通过所述通信服务并根据所述配置文件与所述修改内容修改所述源代码的结构信息；

根据更新后的所述源代码的结构信息更新并保存所述源代码。

7.一种代码处理装置，其特征在于，包括：

代码生成模块，用于确定源代码，并生成与所述源代码对应的目标项目代码；

配置文件确定模块，用于确定配置文件；其中，所述配置文件包含所述源代码与所述目标项目代码之间的对应关系，所述对应关系包括所述源代码与所述目标项目代码之间的结构对应信息；

修改内容确定模块，用于响应于调试操作，调试所述目标项目代码并确定修改内容；

内容同步模块，用于响应于修改操作，根据所述配置文件将所述修改内容同步至所述源代码；

所述修改内容确定模块，还用于响应于所述调试操作，获取与所述调试操作对应的所述目标项目代码的变化结构信息；将所述变化结构信息作为所述修改内容。

8.一种电子设备，其特征在于，包括：

处理器；以及

存储器，所述存储器上存储有计算机可读指令，所述计算机可读指令被所述处理器执行时实现根据权利要求1至6中任一项所述的代码处理方法。

9.一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现根据权利要求1至6中任一项所述的代码处理方法。