CN110750244B - 一种代码同步方法、装置、电子设备和存储介质 - Google Patents

Abstract

本申请提供了一种代码同步方法、装置、电子设备和存储介质，应用于网页页面调试场景中，所述方法包括：若在打开所述页面的浏览器中对所述页面进行代码修改，则将修改后的代码存储在浏览器存储空间中；若接收到同步消息，则在所述浏览器存储空间中确定需要同步的代码，以及所述需要同步的代码对应的链接地址；通过所述链接地址确定所述需要同步的代码在本地项目文件中的存储位置，并同步所述需要同步的代码。该方法能够简单、高效地实现浏览器反向更新项目文件。

Description

一种代码同步方法、装置、电子设备和存储介质

技术领域

本发明涉及计算机技术领域，特别涉及一种代码同步方法、装置、电子设备和存储介质。

背景技术

调试web(网页)页面时，在打开页面的浏览器中调试。

若在浏览器中对样式代码进行了修改，且修改满足需要时，需要将修改后的代码同步修改到本地存储的项目文件中。

如何简单、高效地将在浏览器中修改的样式代码同步到本地存储代码的项目文件中是当前亟待解决的技术问题。

发明内容

有鉴于此，本申请提供一种代码同步方法、装置、电子设备和存储介质，能够简单、高效地实现浏览器反向更新项目文件。

为解决上述技术问题，本申请的技术方案是这样实现的：

在一个实施例中，提供了一种代码同步方法，应用于网页页面调试场景中，所述方法包括：

若在打开所述页面的浏览器中对所述页面进行代码修改，则将修改后的代码存储在浏览器存储空间中；

若接收到同步消息，则在所述浏览器存储空间中确定需要同步的代码，以及所述需要同步的代码对应的链接地址；

通过所述链接地址确定所述需要同步的代码在本地项目文件中的存储位置，并同步所述需要同步的代码。

其中，所述在所述浏览器中确定需要同步的代码，包括：

根据预先配置的同步规则在所述浏览器中确定需要同步的代码；其中，所述同步规则为同步最近一次修改的代码，或最近修改的超文本标记语言html元素对应的代码。

其中，所述同步消息通过页面上设置的同步按钮触发，通过文本框输入触发，或通过与所述页面调试不冲突的快捷键触发。

其中，所述需要同步的代码为修改的代码，或修改的代码对应的链接地址所对应的所有代码。

在另一个实施例中，提供了一种代码同步装置，应用于网页页面调试场景中，所述装置包括：修改单元、接收单元、获取单元和同步单元；

所述修改单元，用于若在打开所述页面的浏览器中对所述页面进行代码修改，则将修改后的代码存储在浏览器存储空间中；

所述接收单元，用于接收同步消息；

所述获取单元，用于若所述接收单元接收到同步消息，则在所述修改单元修改代码后的所述浏览器存储空间中确定需要同步的代码，以及所述需要同步的代码对应的链接地址；

所述同步单元，用于通过所述获取单元获取的链接地址确定所述需要同步的代码在本地项目文件中的存储位置，并同步所述获取单元确定的需要同步的代码。

其中，

所述获取单元，具体用于在所述浏览器存储空间中确定需要同步的代码时，根据预先配置的同步规则在所述浏览器存储空间中确定需要同步的代码；其中，所述同步规则为同步最近一次修改的代码，或最近修改的超文本标记语言html元素对应的代码。

其中，所述同步消息通过页面上设置的同步按钮触发，通过文本框输入触发，或通过与所述页面调试不冲突的快捷键触发。

其中，所述需要同步的代码为修改的代码，或修改的代码对应的链接地址所对应的所有代码。

在另一个实施例中，提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如所述代码同步方法的步骤。

在另一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现所述代码同步方法的步骤。

由上面的技术方案可见，上述实施例中在进行网页页面调试场景中，若对浏览器中的代码进行修改，根据接收到的同步消息自动将需要同步的代码同步到对应的项目文件中。该方案能够简单、高效地实现浏览器反向更新项目文件。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本申请实施例中代码同步流程示意图；

图2为页面调试示意图；

图3为.ant-card-head-title在项目文件中的代码；

图4为本申请实施例中应用于上述技术的装置结构示意图；

图5为本发明实施例提供的电子设备的实体结构示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例例如能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含。例如，包含了一系列步骤或单元的过程、方法、***、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其他步骤或单元。

下面以具体实施例对本发明的技术方案进行详细说明。下面几个具体实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例不再赘述。

本申请实施例中提供一种代码同步方法，应用于网页页面调试场景中，实现该代码同步的设备为调试网页页面的同步设备，如可以为一台PC。

参见图1，图1为页面调试示意图。图1中给出页面调试过程中显示的代码与对应链接地址的关系，如.ant-card-head-title和.ant-ayout中的代码均对应链接地址(index.d7520…c14b5.css.8)，则点击.ant-card-head-title对应的链接地址(index.d7520…c14b5.css.8)显示.ant-card-head-title对应的在项目文件中的详细代码，如图2，图2为.ant-card-head-title在项目文件中的代码。点击.ant-ayout对应的链接地址(index.d7520…c14b5.css.8)显示.ant-ayout对应的在项目文件中的详细代码。

在网页页面调试场景中，会涉及到在浏览器中对代码的修改，并将需要同步到项目文件中的代码进行同步。下面结合附图，详细说明本申请实现代码同步过程。

参见图3，图3为本申请实施例中代码同步流程示意图。具体步骤为：

步骤301，若在打开所述页面的浏览器中对所述页面进行代码修改，则将修改后的代码存储在浏览器存储空间中。

本申请实施例中在进行页面调试过程中，如果在调试过程中进行代码修改，则修改的代码保存在浏览器存储空间中，不会存储到代码所在本地存储的项目文件中。

对代码的修改需要调试来确定是否符合修改需求，只有刷新页面后显示的内容满足需求，这样修改的代码才需要保存到本地的项目文件中；执行步骤302；否则，这些修改的代码只为调试过程中的一种页面显示需要，可能仅仅是为了显示效果，也可能是因为没能达到修改需求，这样的代码修改不需要存储到本地的项目文件中。

步骤302，若接收到同步消息，则在所述浏览器存储空间中确定需要同步的代码，以及所述需要同步的代码对应的链接地址。

需要同步的代码对应的链接地址的获取可以见图1中的显示方式，也就是说选择对应的代码，即可确定该代码对应的链接地址。

本申请实现同步消息的方式可以有如下几种实现方式，但是不限于如下实现方式：

第一种、同步消息通过页面上设置的同步按钮触发；该种实现方式在调试页面上设置一个同步按钮，需要同步修改的代码时，点击该按钮即可触发同步消息的生成；

第二种、通过文本框输入触发；该种实现方式在调试页面上设置一个文本框，可以在该文本框中输入特定的字符、代码等来触发同步消息的生成；

第三种、通过与所述网页页面调试不冲突的快捷键触发；即可以使用调试页面涉及到的快捷键之外的快捷键实现，在调试过程中如果未使用到Ctrl+Q键，则可以使用Ctrl+Q键来触发同步消息的生成。

上述三种方式仅为本申请实施例中的一种举例，在具体实现时不限于上述三种触发同步消息生成的实现方式。

在所述浏览器存储空间中确定需要同步的代码，包括：

根据预先配置的同步规则在所述浏览器存储空间中确定需要同步的代码；其中，所述同步规则为同步最近一次修改的代码，或同步最近修改的超文本标记语言(hypertextmarkup language，html)元素对应的代码。

在具体实现时，当同步规则是仅修改最近一次修改的代码，如针对链接地址A对应的文件中的字体颜色的修改(黑-红)，则仅将对链接地址A对应文件中对字体颜色的修改更新到项目文件中；

当同步规则是同步最近修改的html元素对应的代码，则针对最近一次修改的html元素的所有修改都需要更新到项目文件中所述代码对应的链接地址对应的文件中。

本申请实施例中需要同步的代码：仅同步修改的代码，或修改的代码对应的链接地址对应的所有代码。

步骤303，通过所述链接地址确定所述需要同步的代码在本地项目文件中的存储位置，并同步所述需要同步的代码。

需要同步的代码仅为修改的代码时，同步需要同步的代码，包括：

在浏览器存储空间中存储修改的代码时，对修改的代码进行标记；在同步需要同步的代码时，将标记的代码同步到该代码对应的链接地址所指定的位置。

需要同步的代码为修改的代码对应的链接地址对应的所有代码时，同步需要同步的代码，包括：

通过浏览器存储空间中需要同步的代码对应的链接地址确定同步位置，将浏览器存储空间中需要同步的代码整体更新到对应链接地址对应的位置。

综上所述，本申请实施例中在进行网页页面调试场景中，若对浏览器中的代码进行修改，根据接收到的同步消息自动将需要同步的代码同步到对应的项目文件中。该方案能够简单、高效地实现浏览器反向更新项目文件。

基于同样的发明构思，本申请实施例中还提供一种代码同步装置，应用于网页页面调试场景中。参见图4，图4为本申请实施例中应用于上述技术的装置结构示意图。该装置包括：修改单元401、接收单元402、获取单元403和同步单元404；

修改单元401，用于若在打开所述页面的浏览器中对所述页面进行代码修改，则将修改后的代码存储在浏览器存储空间中；

接收单元402，用于接收同步消息；

获取单元403，用于若接收单元402接收到同步消息，则在修改单元401修改代码后的所述浏览器存储空间中确定需要同步的代码，以及所述需要同步的代码对应的链接地址；

同步单元404，用于通过获取单元403获取的链接地址确定所述需要同步的代码在本地项目文件中的存储位置，并同步获取单元403确定的需要同步的代码。

较佳地，

获取单元403，具体用于在所述浏览器存储空间中确定需要同步的代码时，根据预先配置的同步规则在所述浏览器存储空间中确定需要同步的代码；其中，所述同步规则为同步最近一次修改的代码，或最近修改的超文本标记语言html元素对应的代码。

较佳地，

所述同步消息通过页面上设置的同步按钮触发，通过文本框输入触发，或通过与所述页面调试不冲突的快捷键触发。

较佳地，

所述需要同步的代码为修改的代码，或修改的代码对应的链接地址所对应的所有代码。

上述实施例的单元可以集成于一体，也可以分离部署；可以合并为一个单元，也可以进一步拆分成多个子单元。

在另一个实施例中，还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现所述代码同步方法的步骤。

在另一个实施例中，还提供一种计算机可读存储介质，其上存储有计算机指令，所述指令被处理器执行时可实现所述代码同步方法中的步骤。

图5为本发明实施例提供的电子设备的实体结构示意图。如图5所示，该电子设备可以包括：处理器(processor)510、通信接口(Communications Interface)520、存储器(memory)530和通信总线540，其中，处理器510，通信接口520，存储器530通过通信总线540完成相互间的通信。处理器510可以调用存储器530中的逻辑指令，以执行如下方法：

进行网页页面调试；

若在打开所述页面的浏览器中对所述页面进行代码修改，则将修改后的代码存储在浏览器存储空间中；

若接收到同步消息，则在所述浏览器存储空间中确定需要同步的代码，以及所述需要同步的代码对应的链接地址；

通过所述链接地址确定所述需要同步的代码在本地项目文件中的存储位置，并同步所述需要同步的代码。

此外，上述的存储器530中的逻辑指令可以通过软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明保护的范围之内。

Claims (10)

1.一种代码同步方法，其特征在于，应用于网页页面调试场景中，所述方法包括：

若在打开所述页面的浏览器中对所述页面进行代码修改，则将修改后的代码存储在浏览器存储空间中；

若接收到同步消息，则在所述浏览器存储空间中确定需要同步的代码，以及所述需要同步的代码对应的链接地址；

通过所述链接地址确定所述需要同步的代码在本地项目文件中的存储位置，并同步所述需要同步的代码。

2.根据权利要求1所述的方法，其特征在于，所述在所述浏览器存储空间中确定需要同步的代码，包括：

根据预先配置的同步规则在所述浏览器存储空间中确定需要同步的代码；其中，所述同步规则为同步最近一次修改的代码，或最近修改的超文本标记语言html元素对应的代码。

3.根据权利要求1所述的方法，其特征在于，所述同步消息通过页面上设置的同步按钮触发，通过文本框输入触发，或通过与所述页面调试不冲突的快捷键触发。

4.根据权利要求1-3任一项所述的方法，特征在于，所述需要同步的代码为修改的代码，或修改的代码对应的链接地址所对应的所有代码。

5.一种代码同步装置，其特征在于，应用于网页页面调试场景中，所述装置包括：修改单元、接收单元、获取单元和同步单元；

所述修改单元，用于若在打开所述页面的浏览器中对所述页面进行代码修改，则将修改后的代码存储在浏览器存储空间中；

所述接收单元，用于接收同步消息；

所述获取单元，用于若所述接收单元接收到同步消息，则在所述修改单元修改代码后的所述浏览器存储空间中确定需要同步的代码，以及所述需要同步的代码对应的链接地址；

所述同步单元，用于通过所述获取单元获取的链接地址确定所述需要同步的代码在本地项目文件中的存储位置，并同步所述获取单元确定的需要同步的代码。

6.根据权利要求5所述的装置，其特征在于，

所述获取单元，具体用于在所述浏览器存储空间中确定需要同步的代码时，根据预先配置的同步规则在所述浏览器存储空间中确定需要同步的代码；其中，所述同步规则为同步最近一次修改的代码，或最近修改的超文本标记语言html元素对应的代码。

7.根据权利要求5所述的装置，其特征在于，所述同步消息通过页面上设置的同步按钮触发，通过文本框输入触发，或通过与所述页面调试不冲突的快捷键触发。

8.根据权利要求5-7任一项所述的装置，特征在于，所述需要同步的代码为修改的代码，或修改的代码对应的链接地址所对应的所有代码。

9.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1-4任一项所述的方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现权利要求1-4任一项所述的方法。