I am looking for a way to make debugging of Aura Lightning components easier. For Apex we already have something called 'Apex Replay Debugger' which allows to see changes in values of variables and stepping through functions line by line.
Is there something similar for Aura components? Which can help see changes in values of <aura:attributes> and stepping through controller and helper methods.
To view changes in attribute values, I am currently console.log( )ing manually to broswer's console. But most of the time this method is unadequate or tiresome.

If anyone is aware of any tool, utility etc. which can act as a proper debugger for Aura Lightning component, then please do share. It will help a lot...

Hi,
Can anyone please let me know where exactly I am going wrong
I facing following error
This page has an error. You might just need to refresh it. Action failed: c:TestUpdateComponent$controller$editAccount [Invalid key saveAccountList] Failing descriptor: {c:TestUpdateComponent$controller$editAccount}
Here is my code :
apex class
public class TestUpdateController {
    
    @AuraEnabled
    public static List<Account> getAccListApex(List<Id> accountIds){
        List<Account> accList = new List<Account>();
        accList = [Select Id,Name, Type, Website,Phone,Industry from account limit 5];
        return accList;
    }
    @AuraEnabled
    Public static Map<String,String> saveAccountList(List<Account> accLists){
        Map<String,String> resultMap = new Map<String,String>();
        try{
        update accLists;
         resultMap.put('status','success');  
        resultMap.put('message','Account updated Sucessfully');
        }
        catch(Exception e){
            resultMap.put('status','error');
                 resultMap.put('message',e.getMessage());
        }
        return resultMap;
    }
}
------------------------------------------------------------------------------------
({
    getAccountListhelper : function(component) {
        //add action to global action queue and that action will get Apex controller and fetch list
        var action = component.get("c.getAccListApex");
        action.setParams({accountIds : component.get("v.recordId")});
        action.setCallback(this,function(response){
            var state = response.getState();
            if(state === 'SUCCESS') {
                console.log("====response====",response.getReturnValue());
                component.set("v.accountList",response.getReturnValue());
                
            }
            else {
                alert('Error in getting data');
            }            
        });
        // Adding the action variable to the global action queue
        $A.enqueueAction(action);
    },
    saveAccount: function(component, event, helper){
        var accList = component.get('v.accountList');
        var recordViewForm = component.find('recordViewForm');
        var recordEditForm = component.find('recordEditForm'); 
        var saveAction = component.get('saveAccountList');
        var btn = event.getSource();
        var name = btn.get('v.name');
        var toastEvent = $A.get("e.force:showToast");
        saveAction.setParams({accLists: accList});
        saveAction.setCallback(this,function(response){
            if(state === 'SUCCESS') {
                var dataMap = response.getReturnValue();
                if(dataMap.status=='success'){
                    $A.util.addClass(recordEditForm,'formHide');
                    $A.util.removeClass(recordViewForm,'formHide');
                    btn.set('v.name','edit');
                    btn.set('v.label','Edit');
                    
                    toastEvent.setParams({
                        "title": "Success!",
                        "message": "Account updated Successfully!"
                    });
                    toastEvent.fire();
                }
                else if(dataMap.status=='error'){
                    toastEvent.setParams({
                        "title": "Error!",
                        "message": "Error!"
                    });
                    toastEvent.fire();
                }
                
            }
            else {
                alert('Error in updating data');
            }       
            
        });
        $A.enqueueAction(saveAction);  
        
    }
    
})
----------------------------------------------------------------------------------
controller
({
    getAccountList : function(component, event, helper) {
        helper.getAccountListhelper(component);
        
    },
    createRecord : function (component, event, helper) {
        //global action only work under one app container
        alert('in global action');
        var createRecordEvent = $A.get("e.force:createRecord");
        createRecordEvent.setParams({
            "entityApiName": "Account",
            "defaultFieldValues":{
                'AccountId':component.get("v.recordId")
            }
        });
        createRecordEvent.fire();
    }   ,
    editAccount:function(component, event, helper) {
        //give refrence to button
        var btn = event.getSource();
        var name = btn.get('v.name');
        // Getting the record view form and the record edit form elements
        var recordViewForm = component.find('recordViewForm');
        var recordEditForm = component.find('recordEditForm'); 
        if(name=='edit') {
            $A.util.addClass(recordViewForm,'formHide');
            $A.util.removeClass(recordEditForm,'formHide');
            
            btn.set('v.name','save');
            btn.set('v.label','Save');
        }
        else if(name=='save') {
            // Calling save if the button is save
            helper.saveAccount(component, event, helper);
        }
    }
})
-----------------------------------------------------------------------------------
component

<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId" controller="TestUpdateController" access="global">
    
    <aura:attribute type="List" name="accountList"/>
    <aura:handler name="init" action="{!c.getAccountList}" value="{!this}" />
    <lightning:card title="Account">
        
        <p class="slds-p-horizontal_small">
            <div aura:id="recordViewForm">
                <aura:iteration items="{!v.accountList}" var="account">
                    <lightning:recordViewForm recordId="{!account.Id}" objectApiName="Account">
                        <div class="slds-box slds-theme_default">
                            <lightning:outputField fieldName="Name" />
                            <lightning:outputField fieldName="Website" />
                            <lightning:outputField fieldName="Phone" />
                            <lightning:outputField fieldName="Type" />
                        </div>
                    </lightning:recordViewForm>
                    <br />
                </aura:iteration>
            </div>
            <div aura:id="recordEditForm" class="formHide">
                <aura:iteration items="{!v.accountList}" var="account">
                    <lightning:recordEditForm recordId="{!account.Id}" objectApiName="Account">
                        <lightning:inputField fieldName="Name" />
                        <lightning:inputField fieldName="Website" />
                        <lightning:inputField fieldName="Phone" />
                        <lightning:inputField fieldName="Type" />
                        
                    </lightning:recordEditForm>
                </aura:iteration>
            </div>
        </p>
        <aura:set attribute="actions">
            <lightning:button label="New" onclick="{!c.createRecord}"/>
            <lightning:button variant="brand" label="Edit" name="edit" onclick="{!c.editAccount}"/>
        </aura:set>
        
    </lightning:card>
</aura:component>
----------------------------------------------------------------------------

I am looking for a way to make debugging of Aura Lightning components easier. For Apex we already have something called 'Apex Replay Debugger' which allows to see changes in values of variables and stepping through functions line by line.
Is there something similar for Aura components? Which can help see changes in values of <aura:attributes> and stepping through controller and helper methods.
To view changes in attribute values, I am currently console.log( )ing manually to broswer's console. But most of the time this method is unadequate or tiresome.

If anyone is aware of any tool, utility etc. which can act as a proper debugger for Aura Lightning component, then please do share. It will help a lot...

Hi,

 

I just tried creating a trial account for the Enterprise edition using the http://www.salesforce.com/products/editions-pricing/feature-comparison/

 

I followed the steps mentioned below to see the trial account created for Professional edition

 

a) Clicked Enterprise Edition text button(in Editions and Pricing section).

b) Clicked Free Trial and followed the NEXT STEPS section entering all the details and clicked Submit button

 

So, please guide me to create an trial account on Enterprise Edition.

Thanks,
Viju

I am interesting  to learn , how work with sandbox .

I know it is available only Enterprise and Unlimited Editions.

But i don't know how to create enterprise editions and how to create sandbox.

Is it possible to create Enterprise editions free .

please give me solution